/* ═══════════════════════════════════════════════════════════════
   Cloud Lab — remote execution lane
   Same design system as DToR / Sensor Research Studio.
   Every rule scoped to .clab.
   ═══════════════════════════════════════════════════════════════ */
.clab {
  --studio-bg:           #070a12;
  --studio-panel:        rgba(14, 19, 31, 0.9);
  --studio-panel-strong: #111725;
  --studio-line:         rgba(151, 169, 206, 0.22);
  --studio-line-strong:  rgba(151, 169, 206, 0.28);
  --studio-text:         #f5f7fc;
  --studio-muted:        #8d97ad;
  --studio-cyan:         #55e6d1;
  --studio-cyan-rgb:     85, 230, 209;
  --studio-violet:       #a892ff;
  --studio-violet-rgb:   168, 146, 255;
  --studio-amber:        #f5c96a;
  --studio-amber-rgb:    245, 201, 106;
  --studio-red:          #ff7a8d;
  --studio-radius:       18px;
  --studio-font:         Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --studio-mono:         "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--studio-text);
  font-family: var(--studio-font);
  font-size: 13px;
  line-height: 1.5;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 52% -15%, rgba(var(--studio-cyan-rgb), .1), transparent 38%),
    var(--studio-bg);
  background-size: 36px 36px, 36px 36px, auto, auto;
  padding: 28px 20px 60px;
  box-sizing: border-box;
}
.clab *, .clab *::before, .clab *::after { box-sizing: border-box; }

.clab-ambient {
  position: fixed; z-index: 0;
  width: 460px; height: 460px;
  border-radius: 50%; filter: blur(110px);
  opacity: .12; pointer-events: none;
}
/* ~50 s periods: below conscious perception, but it stops a dark field
   reading as a frozen render over an eight-hour day. */
@keyframes clab-drift-a { from { transform: translate(0, 0); } to { transform: translate(40px, -26px); } }
@keyframes clab-drift-b { from { transform: translate(0, 0); } to { transform: translate(-30px, 38px); } }
.clab-ambient-one { top: 10%; left: -260px; background: var(--studio-cyan); animation: clab-drift-a 46s ease-in-out infinite alternate; }
.clab-ambient-two { right: -240px; bottom: 2%; background: var(--studio-violet); animation: clab-drift-b 61s ease-in-out infinite alternate; }

.clab-wrap { position: relative; z-index: 1; max-width: 1780px; margin: 0 auto; }

/* ── Hero ───────────────────────────────────────────────── */
.clab-hero {
  padding: 26px 4px 20px;
  display: flex; align-items: flex-end; gap: 24px;
  border-bottom: 1px solid var(--studio-line);
  margin-bottom: 16px;
}
.clab-hero-copy { flex: 1; min-width: 0; }
.clab-eyebrow {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  color: var(--studio-cyan);
  font-family: var(--studio-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
}
.clab-eyebrow > span { width: 22px; height: 1px; background: var(--studio-cyan); }
.clab-title-line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.clab-hero-copy h1 {
  margin: 0; font-size: clamp(28px, 3vw, 46px); font-weight: 650;
  letter-spacing: -.045em; line-height: 1; color: var(--studio-text);
}
.clab-pill {
  padding: 5px 9px; border: 1px solid rgba(var(--studio-cyan-rgb), .34); border-radius: 999px;
  color: var(--studio-cyan); background: rgba(var(--studio-cyan-rgb), .07);
  font-family: var(--studio-mono); font-size: 9px; font-weight: 700; letter-spacing: .11em;
  white-space: nowrap;
}
.clab-pill.is-auto { border-color: rgba(var(--studio-amber-rgb), .38); color: var(--studio-amber); background: rgba(var(--studio-amber-rgb), .07); }
.clab-pill.is-violet { border-color: rgba(var(--studio-violet-rgb), .34); color: var(--studio-violet); background: rgba(var(--studio-violet-rgb), .07); }
.clab-hero-copy p { margin: 0; color: var(--studio-muted); font-size: 13px; max-width: 74ch; }
.clab-hero-links { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; flex-wrap: wrap; }
.clab-hero-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--studio-line); border-radius: 8px;
  color: var(--studio-muted); font-family: var(--studio-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; transition: border-color .18s, color .18s;
}
.clab-hero-link:hover { border-color: var(--studio-line-strong); color: var(--studio-text); text-decoration: none; }

/* ── Status strip ───────────────────────────────────────── */
.clab-status {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  min-height: 44px; margin-bottom: 12px; padding: 8px 15px;
  border: 1px solid var(--studio-line); border-radius: 11px;
  background: rgba(9, 13, 22, .8);
}
.clab-host {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--studio-mono); font-size: 11px; color: var(--studio-text);
}
.clab-host i { color: var(--studio-cyan); }
.clab-host .clab-host-url { color: var(--studio-muted); }
.clab-status-sep { width: 1px; height: 20px; background: var(--studio-line); }
.clab-probe { display: inline-flex; align-items: center; gap: 7px; }
.clab-probe > span:last-child {
  font-family: var(--studio-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--studio-muted);
}
.clab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid #566076; background: #111622; transition: .25s ease;
}
.clab-dot.is-on { border-color: var(--studio-cyan); background: var(--studio-cyan); box-shadow: 0 0 9px rgba(var(--studio-cyan-rgb), .8); }
.clab-dot.is-busy { border-color: var(--studio-amber); background: var(--studio-amber); box-shadow: 0 0 9px rgba(var(--studio-amber-rgb), .8); animation: clab-pulse 1.1s ease-in-out infinite; }
.clab-dot.is-off { border-color: var(--studio-red); background: var(--studio-red); box-shadow: 0 0 9px var(--studio-red); }
@keyframes clab-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* The house strip puts a state word plus a descriptor in this corner, and
   at 1280 the whole right column drops below the camera - so this is the
   only evidence of a click that stays on screen. Static by design. */
.clab-strip-state { margin-left: auto; text-align: right; min-width: 0; }
.clab-strip-state strong {
  display: block; font-family: var(--studio-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--studio-text);
}
.clab-strip-state span {
  display: block; margin-top: 1px; font-family: var(--studio-mono);
  font-size: 10px; color: var(--studio-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}

/* ── Grid ───────────────────────────────────────────────── */
/* One gutter value everywhere, and stretch rather than start: the three
   columns share a baseline instead of leaving a 200 px dead band under
   whichever one happens to be shortest. */
.clab-grid {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 372px;
  gap: 10px;
  align-items: stretch;
}
.clab-col-a, .clab-col-b, .clab-col-c { display: flex; flex-direction: column; min-width: 0; }
/* one panel per column takes the slack, and gives it to something useful:
   a taller sparkline, a taller frame, a longer transcript */
.clab-col-a > .clab-panel:last-child,
.clab-col-b > .clab-panel:last-child,
.clab-col-c > .clab-panel:last-child { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.clab-col-a > .clab-panel:last-child > .clab-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.clab-col-a .clab-telemetry { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.clab-col-a .clab-tele { display: flex; flex-direction: column; flex: 1 1 auto; }
.clab-col-a .clab-tele canvas { flex: 1 1 auto; }
.clab-col-c > .clab-panel:last-child > .clab-panel-body { flex: none; }
.clab-col-c .clab-log { flex: 1 1 0; min-height: 150px; height: auto; }
@media (max-width: 1460px) {
  .clab-grid { grid-template-columns: 236px minmax(0, 1fr); }
  .clab-col-c { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 10px; }
  .clab-col-c > .clab-panel { margin-top: 0; }
  .clab-col-c > .clab-panel:first-child { flex: 0 0 352px; }
  .clab-col-c > .clab-panel:last-child { flex: 1 1 auto; }
  .clab-col-a .clab-tele canvas { flex: none; }
  .clab-col-a .clab-telemetry { flex: none; }
}
@media (max-width: 900px)  {
  .clab-grid { grid-template-columns: minmax(0, 1fr); }
  .clab-col-c { grid-column: auto; flex-direction: column; }
  .clab-col-c > .clab-panel + .clab-panel { margin-top: 12px; }
}
@media (max-width: 1180px) { .clab-col-a .clab-tele canvas { flex: none; } .clab-col-a .clab-telemetry { flex: none; } }

/* 18 px is the loudest geometric token in the system and the sibling pages
   spend it about four times a page. Here the footer slab keeps it and every
   working panel steps down, so the page reads as an instrument console
   rather than a card dashboard. */
.clab-panel {
  border: 1px solid var(--studio-line); border-radius: 12px;
  background: var(--studio-panel); overflow: hidden;
}
.clab-panel + .clab-panel { margin-top: 10px; }
.clab-col-b > .clab-panel { border-color: rgba(151, 169, 206, .3); }
.clab-panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1px solid var(--studio-line);
  background: rgba(255,255,255,.012);
}
.clab-panel-head h2 {
  margin: 0; font-family: var(--studio-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--studio-muted);
}
.clab-panel-head .clab-count {
  margin-left: auto; font-family: var(--studio-mono); font-size: 10px; color: var(--studio-muted);
}
.clab-panel-body { padding: 13px 14px; }

/* ── Instrument rack ────────────────────────────────────── */
.clab-inst {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px;
  padding: 11px; border: 1px solid var(--studio-line); border-radius: 12px;
  background: rgba(255,255,255,.015); align-items: center;
}
/* two up: the rail was running 200 px past the camera and parking the
   dead band under the largest panel on the page */
.clab-col-a .clab-instbody { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.clab-inst + .clab-inst { margin-top: 0; }
.clab-inst { grid-template-columns: 30px 1fr; gap: 9px; padding: 9px; }
.clab-inst-icon { width: 30px; height: 30px; font-size: 12px; }
.clab-inst-sub { display: none; }
@media (max-width: 1180px) { .clab-inst-sub { display: block; } }
.clab-inst.is-active { border-color: rgba(var(--studio-cyan-rgb), .42); background: rgba(var(--studio-cyan-rgb), .05); }
.clab-inst-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--studio-line-strong); color: var(--studio-cyan);
  background: rgba(var(--studio-cyan-rgb), .06); font-size: 14px;
}
.clab-inst-name { font-family: var(--studio-mono); font-size: 12px; font-weight: 600; color: var(--studio-text); }
.clab-inst-sub { font-size: 11px; color: var(--studio-muted); }
.clab-inst-state {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--studio-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--studio-muted);
}

.clab-palette { display: flex; flex-wrap: wrap; gap: 7px; }
.clab-cmd {
  appearance: none; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--studio-line-strong); border-radius: 8px;
  background: rgba(255,255,255,.02); color: var(--studio-text);
  font-family: var(--studio-mono); font-size: 10.5px;
  transition: border-color .16s, background .16s, transform .12s;
}
.clab-cmd:hover { border-color: var(--studio-cyan); background: rgba(var(--studio-cyan-rgb), .09); transform: translateY(-1px); }
.clab-cmd:active { transform: translateY(0); }
.clab-hint { margin: 9px 0 0; font-size: 11px; color: var(--studio-muted); line-height: 1.45; }

/* ── Camera ─────────────────────────────────────────────── */
.clab-col-b > .clab-panel { display: flex; flex-direction: column; }
.clab-cam-shell {
  position: relative; background: #05070d;
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.clab-cam-frame { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; }
.clab-cam { display: block; width: 100%; height: 100%; }
.clab-cam-hud {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--studio-mono); font-size: 10px; letter-spacing: .09em;
}
.clab-hud-tl, .clab-hud-tr, .clab-hud-bl, .clab-hud-br { position: absolute; display: flex; align-items: center; gap: 7px; }
.clab-hud-tl { top: 11px; left: 13px; }
.clab-hud-tr { top: 11px; right: 13px; color: var(--studio-muted); }
.clab-hud-bl { bottom: 11px; left: 13px; color: var(--studio-muted); }
.clab-hud-br { bottom: 11px; right: 13px; color: var(--studio-muted); }
.clab-rec { display: inline-flex; align-items: center; gap: 6px; color: var(--studio-red); font-weight: 700; }
.clab-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--studio-red); box-shadow: 0 0 8px var(--studio-red); animation: clab-pulse 1.6s ease-in-out infinite; }
.clab-hud-corner { position: absolute; width: 26px; height: 26px; border: 1px solid rgba(var(--studio-cyan-rgb), .38); }
.clab-hud-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.clab-hud-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.clab-hud-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.clab-hud-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Centred at a fixed pixel offset this plate sat on top of the overhead
   luminaire - the scene's only light fixture - and ate it for the whole
   run. Left-aligned under the LIVE row it is where the eye already is. */
.clab-hud-step {
  position: absolute; top: 36px; left: 13px;
  padding: 6px 13px; border-radius: 8px;
  background: rgba(5, 7, 13, .78); border: 1px solid var(--studio-line-strong);
  color: var(--studio-cyan); font-family: var(--studio-mono);
  font-size: 16px; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
  opacity: 0; transition: opacity .3s ease;
}
.clab-hud-step.is-on { opacity: 1; }
/* the completion reward is the brackets that are already there */
@keyframes clab-corner {
  0%   { border-color: rgba(var(--studio-cyan-rgb), .38); }
  20%  { border-color: rgba(var(--studio-cyan-rgb), .85); }
  100% { border-color: rgba(var(--studio-cyan-rgb), .38); }
}
.clab-cam-shell.is-complete .clab-hud-corner { animation: clab-corner .9s ease-out 1; }
/* a cyan hairline wiping the bottom edge of the frame: one shot, 700 ms,
   the width of the largest element on the page */
@keyframes clab-sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.clab-cam-shell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(var(--studio-cyan-rgb), 0), var(--studio-cyan), rgba(var(--studio-cyan-rgb), 0));
  transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.clab-cam-shell.is-complete::after { animation: clab-sweep .7s cubic-bezier(.2,.8,.3,1) 1; }

/* ── Telemetry ──────────────────────────────────────────── */
.clab-telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .clab-telemetry { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1460px) {
  .clab-col-a .clab-tele:first-child .clab-tele-value { font-size: 22px; }
  .clab-col-a .clab-tele-label { font-size: 10px; letter-spacing: .1em; }
}
.clab-tele {
  border: 1px solid var(--studio-line); border-radius: 12px;
  background: rgba(255,255,255,.015); padding: 10px 12px 6px;
}
.clab-tele-head { display: flex; align-items: baseline; gap: 8px; }
.clab-tele-label {
  font-family: var(--studio-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--studio-muted); white-space: nowrap;
}
.clab-tele-value { margin-left: auto; font-family: var(--studio-mono); font-size: 20px; font-weight: 600; color: var(--studio-text); }
/* Stacked in the rail the three channels can be ranked, and the one the
   whole run is about gets the weight. No fill, no glow - size and line. */
.clab-col-a .clab-telemetry { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.clab-col-a .clab-tele:first-child { border-color: rgba(110, 190, 255, .28); }
.clab-col-a .clab-tele:first-child .clab-tele-value { font-size: 26px; }
.clab-col-a .clab-tele:first-child canvas { height: 48px; }

.clab-tele-value small { font-size: 10px; color: var(--studio-muted); font-weight: 400; margin-left: 2px; }
.clab-tele canvas { display: block; width: 100%; height: 38px; margin-top: 4px; }

/* ── Composer ───────────────────────────────────────────── */
.clab-composer {
  width: 100%; min-height: 108px; resize: vertical;
  padding: 11px 12px; border: 1px solid var(--studio-line-strong); border-radius: 11px;
  background: #080b13; color: var(--studio-text);
  font-family: var(--studio-mono); font-size: 12px; line-height: 1.7;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.clab-composer:focus { border-color: var(--studio-cyan); box-shadow: 0 0 0 3px rgba(var(--studio-cyan-rgb), .1); }
.clab-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 10px; align-items: stretch; }
.clab-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; min-height: 44px; border-radius: 10px; border: 1px solid transparent;
  justify-content: center;
  font-family: var(--studio-mono); font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; transition: .16s ease;
}
/* the house's directional drop, not a halo - an idle button should not be
   competing with the chill station for the eye */
.clab-btn-primary { background: var(--studio-cyan); color: #05201d; box-shadow: 0 9px 24px rgba(var(--studio-cyan-rgb), .14); }
.clab-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(var(--studio-cyan-rgb), .22); filter: brightness(1.06); }
.clab-btn-ghost { background: transparent; border-color: var(--studio-line-strong); color: var(--studio-muted); }
.clab-btn-ghost:hover:not(:disabled) { border-color: var(--studio-red); color: var(--studio-red); }
.clab #clabAbort { padding: 0 16px; }
/* a blanket opacity fade left the label at roughly 1.6:1 for the whole run */
.clab-btn:disabled { cursor: not-allowed; box-shadow: none; transform: none; }
.clab-btn-primary:disabled { background: rgba(var(--studio-cyan-rgb), .16); color: rgba(var(--studio-cyan-rgb), .65); }
/* While a job is on the floor this is the only live control on the page,
   and a presenter should not have to hunt for it. Red is already a token
   and is otherwise spent on exactly one thing. */
.clab-btn-ghost:not(:disabled) { color: var(--studio-red); border-color: rgba(255,122,141,.45); }
.clab-btn-ghost:disabled { color: rgba(151,169,206,.32); border-color: rgba(151,169,206,.14); background: transparent; }
.clab-parse { display: block; margin-top: 8px; font-family: var(--studio-mono); font-size: 10px; color: var(--studio-muted); }
.clab-parse.is-bad { color: var(--studio-red); }

/* ── Job ────────────────────────────────────────────────── */
.clab-job-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--studio-line);
}
.clab-jobid { font-family: var(--studio-mono); font-size: 11px; color: var(--studio-muted); }
.clab-jobid b { color: var(--studio-text); font-weight: 600; }
.clab-state {
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--studio-line-strong);
  font-family: var(--studio-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--studio-muted);
  transition: color .25s, background .25s, border-color .25s;
}
@keyframes clab-state-hit { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
.clab-state.is-hit { display: inline-block; animation: clab-state-hit .38s ease-out 1; }
.clab-state.is-idle      { border-color: var(--studio-line-strong); color: var(--studio-muted); background: rgba(255,255,255,.02); }
.clab-state.is-queued    { border-color: rgba(var(--studio-violet-rgb), .4); color: var(--studio-violet); background: rgba(var(--studio-violet-rgb), .07); }
.clab-state.is-running   { border-color: rgba(var(--studio-amber-rgb), .45); color: var(--studio-amber); background: rgba(var(--studio-amber-rgb), .08); }
.clab-state.is-completed { border-color: rgba(var(--studio-cyan-rgb), .45); color: var(--studio-cyan); background: rgba(var(--studio-cyan-rgb), .08); }
.clab-state.is-failed    { border-color: var(--studio-red); color: var(--studio-red); background: rgba(255,122,141,.08); }
.clab-progress-wrap { margin-left: auto; flex: 1; display: flex; align-items: center; gap: 9px; }
.clab-progress { flex: 1; min-width: 90px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.clab-progress > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--studio-cyan), var(--studio-violet));
  /* the JS rewrites this every 120 ms, so a long ease was permanently
     retargeted and the bar trailed the true value by a third of its travel */
  transition: width .14s linear;
}
/* the pill and the progress wrapper are not siblings in this markup, so
   the descendant half of the old selector never matched anything */
.clab-progress > i.is-final { transition: width .5s cubic-bezier(.2,.9,.3,1); }
.clab-progress > i.is-failed { background: var(--studio-red); }
.clab-progress-text { font-family: var(--studio-mono); font-size: 10px; color: var(--studio-muted); white-space: nowrap; }

/* twenty-four palette clicks is exactly what an unsupervised visitor does;
   the checklist scrolls instead of turning the page into 2000 px */
.clab-steps { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; }
.clab-steps::-webkit-scrollbar { width: 8px; }
.clab-steps::-webkit-scrollbar-thumb { background: rgba(151,169,206,.2); border-radius: 4px; }
.clab-steps li {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 2px; border-bottom: 1px dashed rgba(151,169,206,.16);
  font-family: var(--studio-mono); font-size: 11.5px; color: var(--studio-muted);
  transition: color .2s;
}
.clab-steps li:last-child { border-bottom: 0; }
.clab-steps li.is-running {
  color: var(--studio-text); background: rgba(var(--studio-amber-rgb), .06);
  box-shadow: inset 2px 0 0 var(--studio-amber); border-radius: 6px; padding-left: 8px;
}
.clab-steps li.is-done { color: var(--studio-text); }
.clab-step-mark {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--studio-line-strong); font-size: 8px; color: var(--studio-muted);
}
.clab-steps li.is-running .clab-step-mark { border-color: var(--studio-amber); color: var(--studio-amber); box-shadow: 0 0 6px rgba(var(--studio-amber-rgb), .35); }
.clab-steps li.is-done .clab-step-mark { border-color: var(--studio-cyan); color: var(--studio-cyan); background: rgba(var(--studio-cyan-rgb), .12); }
/* a controlled stop: a red mark and a held bar, no flash and no shake */
.clab-steps li.is-aborted { color: var(--studio-text); }
.clab-steps li.is-aborted .clab-step-mark { border-color: var(--studio-red); color: var(--studio-red); background: rgba(255,122,141,.1); }
.clab-steps li.is-skipped { opacity: .45; }
.clab-step-dur { font-size: 10px; color: var(--studio-muted); }
.clab-empty { padding: 18px 4px; text-align: center; font-size: 11.5px; color: var(--studio-muted); }

/* ── Log ────────────────────────────────────────────────── */
.clab-log {
  height: 178px; overflow-y: auto; padding: 10px 12px;
  background: #060810; border-top: 1px solid var(--studio-line);
  font-family: var(--studio-mono); font-size: 11px; line-height: 1.75;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.clab-log div { display: flex; gap: 9px; animation: clab-in .25s ease both; }
@keyframes clab-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.clab-log .t { color: #5f6b85; flex: none; }
.clab-log .s { color: var(--studio-violet); flex: none; min-width: 44px; }
.clab-log .m { color: #b8c2d8; min-width: 0; overflow-wrap: anywhere; }
.clab-log .m.ok { color: var(--studio-cyan); }
.clab-log .m.warn { color: var(--studio-amber); }
.clab-log::-webkit-scrollbar { width: 8px; }
.clab-log::-webkit-scrollbar-thumb { background: rgba(151,169,206,.2); border-radius: 4px; }

/* ── Contract footer ────────────────────────────────────── */
.clab-contract { margin-top: 10px; border-radius: var(--studio-radius); }
.clab-contract table { width: 100%; border-collapse: collapse; font-family: var(--studio-mono); font-size: 11px; }
.clab-contract td { padding: 7px 10px; border-bottom: 1px dashed rgba(151,169,206,.16); color: var(--studio-muted); vertical-align: top; }
.clab-contract tr:last-child td { border-bottom: 0; }
.clab-contract td:first-child { width: 96px; color: var(--studio-cyan); white-space: nowrap; }
/* 34% left a ~410 px empty gutter on every row at 1680 */
.clab-contract td:nth-child(2) { color: var(--studio-text); width: 240px; padding-right: 24px; overflow-wrap: anywhere; }
.clab-verb {
  display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-align: center;
  border: 1px solid var(--studio-line-strong);
}
.clab-verb.get  { color: var(--studio-cyan); border-color: rgba(var(--studio-cyan-rgb), .35); }
/* a REST verb in a static reference table is not active work, and this was
   the only amber below the fold */
.clab-verb.post { color: var(--studio-violet); border-color: rgba(var(--studio-violet-rgb), .35); }