/* ── Execution Page (read-only live/finished run viewer) ──
   Modeled on a CI pipeline / trace-viewer reading: a connected step
   timeline (not a bare list), a browser-framed live preview as the
   dominant focal panel, and a console-style log — rather than three
   equal-weight generic cards. */

.exec-root{
  /* Action-type accent palette, page-scoped (not the shared tokens.css —
     these exist only to tell step icons apart, not app-wide semantics).
     Deliberately distinct from --success/--error/--warning, which the
     timeline badge already uses for pass/fail/running, so an icon's
     color never gets read as a status. */
  --exec-navigate:#2f6fed; --exec-navigate-bg:#eaf1fe;
  --exec-click:#8b5cf6;    --exec-click-bg:#f2edfd;
  --exec-input:#0aa5a5;    --exec-input-bg:#e6f7f7;
  --exec-select:#5b5fc7;   --exec-select-bg:#eceefb;
  --exec-verify:#d6499c;   --exec-verify-bg:#fbe9f3;
  --exec-wait:#64748b;     --exec-wait-bg:#eef1f4;
  display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);height:100%;box-sizing:border-box}

.exec-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.exec-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;margin:0}

/* Infobar — mirrors TestWorkspacePage's TEST NAME/ENVIRONMENT/AGENT/
   STARTED BY/STARTED AT segmented strip */
.exec-infobar{display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-sm)}
.exec-infobar__seg{padding:0 var(--space-4);border-right:1px solid var(--border)}
.exec-infobar__seg:first-child{padding-left:0}
.exec-infobar__label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--weight-medium);margin-bottom:2px}
.exec-infobar__val{font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--weight-medium);white-space:nowrap}
.exec-infobar__actions{margin-left:auto;padding-left:var(--space-4);display:flex;gap:var(--space-2)}

.exec-btn{height:36px;padding:0 var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);
  font-weight:var(--weight-medium);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.exec-btn--report{background:#fff;border:1.5px solid var(--brand);color:var(--brand);text-decoration:none}
.exec-btn--report:hover{background:var(--brand-muted)}
.exec-btn--stop{background:var(--surface);border:1.5px solid var(--error-border);color:var(--error)}
.exec-btn--stop:hover{background:var(--error-bg)}
.exec-btn--stop:disabled{opacity:.6;cursor:default}

.exec-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;flex-shrink:0}
.exec-badge--running{background:var(--warning-bg);color:var(--warning)}
.exec-badge--passed{background:var(--success-bg);color:var(--success)}
.exec-badge--failed{background:var(--error-bg);color:var(--error)}
.exec-dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;animation:exec-pulse 1.2s ease-in-out infinite}
@keyframes exec-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Preview is the focal panel — takes noticeably more of the right
   column's height than the log, which is reference material, not the
   main event. */
.exec-body{flex:1;min-height:0;display:grid;grid-template-columns:680px 1fr;grid-template-rows:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-4)}
.exec-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}
.exec-panel--steps{grid-row:1 / 3}
.exec-panel--preview{grid-column:2;grid-row:1;padding:0}
.exec-panel--log{grid-column:2;grid-row:2}
.exec-panel__hd{height:44px;flex-shrink:0;display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4);
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.exec-panel__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.exec-panel__count{margin-left:var(--space-1);color:var(--text-muted);font-size:var(--text-xs)}
.exec-panel__bd{flex:1;min-height:0;overflow:auto}

/* ── Test Steps — connected timeline, not a bare list ── */
.exec-steps-list{padding:var(--space-3) 0}
.exec-step{display:flex;gap:var(--space-3);padding:0 var(--space-4)}
.exec-step__rail{flex-shrink:0;display:flex;flex-direction:column;align-items:center;width:22px}
.exec-step__badge{flex-shrink:0;width:22px;height:22px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--weight-bold);
  background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
.exec-step__badge svg{width:11px;height:11px}
.exec-step--passed .exec-step__badge{background:var(--success);color:#fff;border-color:var(--success)}
.exec-step--failed .exec-step__badge{background:var(--error);color:#fff;border-color:var(--error)}
.exec-step--running .exec-step__badge{background:#fff;border-color:var(--warning)}
.exec-step__line{width:2px;flex:1;min-height:16px;background:var(--border);margin:2px 0}
.exec-step--passed .exec-step__line{background:var(--success)}
.exec-step__body{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 0 var(--space-4)}
.exec-step__aicon{flex-shrink:0;width:22px;height:22px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-muted)}
.exec-step__aicon svg{width:13px;height:13px}
.exec-step__aicon--navigate{background:var(--exec-navigate-bg);color:var(--exec-navigate)}
.exec-step__aicon--click{background:var(--exec-click-bg);color:var(--exec-click)}
.exec-step__aicon--fill,.exec-step__aicon--type{background:var(--exec-input-bg);color:var(--exec-input)}
.exec-step__aicon--select{background:var(--exec-select-bg);color:var(--exec-select)}
.exec-step__aicon--verify,.exec-step__aicon--screenshot{background:var(--exec-verify-bg);color:var(--exec-verify)}
.exec-step__aicon--wait{background:var(--exec-wait-bg);color:var(--exec-wait)}
.exec-step__desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--text-secondary)}
.exec-step--running .exec-step__desc{color:var(--text-primary);font-weight:var(--weight-medium)}
.exec-step--failed .exec-step__desc{color:var(--error)}
.exec-steps-empty{padding:var(--space-6);text-align:center;color:var(--text-secondary);font-size:var(--text-sm)}

.exec-spinner{display:block;width:11px;height:11px;border:2px solid var(--warning-bg);border-top-color:var(--warning);border-radius:var(--radius-full);animation:exec-spin .8s linear infinite}
@keyframes exec-spin{to{transform:rotate(360deg)}}

/* ── Live Browser Preview — a real browser-chrome bar makes the frame
   read as "a browser on a real page", not a bare image floating in
   space; status moves into the chrome bar instead of an outer colored
   ring, which is calmer and matches where a real browser tab shows it. */
.exec-chrome{flex-shrink:0;height:38px;display:flex;align-items:center;gap:var(--space-2);
  padding:0 var(--space-3);background:var(--surface-2);border-bottom:1px solid var(--border)}
.exec-chrome__dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--border-hi)}
.exec-chrome__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  height:22px;display:flex;align-items:center;padding:0 var(--space-3);border-radius:var(--radius-full);
  background:var(--surface);border:1px solid var(--border);font-size:11px;color:var(--text-secondary);
  font-family:var(--font-mono,monospace)}
.exec-chrome__status{flex-shrink:0;font-size:10px;font-weight:var(--weight-bold);letter-spacing:.03em;padding:0 var(--space-2)}
.exec-chrome__status--running{color:var(--warning)}
.exec-chrome__status--passed{color:var(--success)}
.exec-chrome__status--failed{color:var(--error)}
.exec-preview-canvas{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface-0);padding:var(--space-4)}
.exec-preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-sm);
  outline:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.08))}
.exec-preview-empty{color:var(--text-secondary);font-size:var(--text-sm);text-align:center;padding:var(--space-6)}

/* ── Run Log — console-style rows, a colored left rail instead of a
   rigid grid column so a long, wrapped message still reads as one
   entry. ── */
.exec-log{padding:var(--space-2);display:flex;flex-direction:column;gap:1px;overflow-x:auto}
.exec-logrow{display:grid;grid-template-columns:76px 52px 1fr;align-items:baseline;gap:var(--space-3);
  padding:5px var(--space-3);border-left:3px solid var(--border);background:var(--surface-0);white-space:nowrap}
.exec-logrow--passed{border-left-color:var(--success)}
.exec-logrow--failed{border-left-color:var(--error)}
.exec-logrow--healed{border-left-color:var(--warning)}
.exec-logrow__time{font-size:10px;color:var(--text-muted);font-family:var(--font-mono,monospace)}
.exec-logrow__lvl{font-size:10px;font-weight:var(--weight-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}
.exec-logrow--passed .exec-logrow__lvl{color:var(--success)}
.exec-logrow--failed .exec-logrow__lvl{color:var(--error)}
.exec-logrow--healed .exec-logrow__lvl{color:var(--warning)}
.exec-logrow__msg{font-size:12px;color:var(--text-primary);font-family:var(--font-mono,monospace)}
.exec-log-empty{padding:var(--space-6);text-align:center;color:var(--text-secondary);font-size:var(--text-sm)}

.exec-loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--text-sm)}
.exec-loading--err{color:var(--error)}

@media(max-width:1080px){
  .exec-infobar{flex-wrap:wrap;row-gap:var(--space-2)}
  .exec-infobar__actions{margin-left:0;width:100%;padding-left:0}
  .exec-body{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .exec-panel--steps,.exec-panel--preview,.exec-panel--log{grid-column:1;grid-row:auto}
  .exec-panel{min-height:240px}
}