/* The run page (pages/run, core/static/js/run.js). g.css tokens only. */

/* g.css opts pages into cross-document view transitions; this page reloads itself, often in the
   background, where Chrome aborts the transition and rejects. */
@view-transition { navigation: none; }

.is-run .small { font-size: 12px; line-height: var(--lh-1); margin: 0; }
.is-run .muted { color: var(--text-secondary); }
.is-run .warn { color: var(--warn-text); }
.is-run .err { color: var(--danger-text); }
.is-run .card > * + * { margin-top: var(--sp-2); }
.is-run .card p { margin-bottom: 0; }
.is-run .codeblock { white-space: pre-wrap; overflow-wrap: anywhere; }

#status { margin: 0; font-size: 24px; line-height: var(--lh-4); font-weight: 600; overflow-wrap: anywhere; }
#status[data-tone="ok"] { color: var(--ok-text); }
#status[data-tone="warn"] { color: var(--warn-text); }
#status[data-tone="danger"] { color: var(--danger-text); }

.facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0 0; font-size: 13px; line-height: var(--lh-2); }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.entries { list-style: none; margin: 0; padding: 0; }
.entries li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0; border-top: 1px solid var(--border-subtle); min-width: 0; }
.entries li:first-child { border-top: 0; }
.entry-head { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; min-width: 0; }
.entry-head b { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.entries .url { overflow-wrap: anywhere; }

/* While a job runs the iframe fills the window and only the overlay sits on it. */
#stage, #hud { display: none; }
body[data-state="running"] { overflow: hidden; }
body[data-state="running"] #stage { display: block; position: fixed; inset: 0; z-index: 10; background: var(--bg); }
#stage iframe { display: block; width: 100%; height: 100%; border: 0; }
body[data-state="running"] #hud { display: block; position: fixed; top: var(--sp-2); right: var(--sp-2); z-index: 11; width: min(320px, calc(100% - 2 * var(--sp-2))); box-sizing: border-box; padding: var(--sp-2) var(--sp-3); }
.hud-head { display: flex; align-items: center; gap: var(--sp-2); }
.hud-id { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hud-elapsed { font-weight: 600; }
.hud-body { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.hud-body[hidden] { display: none; }
.hud-url { overflow-wrap: anywhere; }
#hud .g-progress { width: 100%; }