/* Run page: the header with the run's path across the page, the attention notice, the tab panels (the Overview and
   what leads it, the Machines tab's map, the logs, the history along the run's line) and the run's dialogs.
   Page rules are under .page[data-page="run"] (the shell sets it), so nothing here reaches another page; the
   dialogs, which the Runs page opens too, are under .run-dialog. Tokens from styles.css only. */

.page[data-page="run"] { gap: 22px; }

/* header: the name, its state, id and project (apart by space: the id's face and the project's link tell them
   apart), the actions; the path; the command and the runtime */
.page[data-page="run"] .run-head { display: grid; gap: 12px; min-width: 0; }
.page[data-page="run"] .run-title-row { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
.page[data-page="run"] .run-name { min-width: 0; overflow-wrap: anywhere; }
.page[data-page="run"] .run-title-row > .badge { font-size: 14px; }
.page[data-page="run"] .run-ident { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; color: var(--ink-2); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.page[data-page="run"] .run-ident .mono { color: var(--ink-3); }
.page[data-page="run"] .run-project { color: var(--ink-2); }
/* the actions keep one row; why one is off, or what was asked, is a line of its own under them */
.page[data-page="run"] .run-actions {
  display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; align-self: center;
}
.page[data-page="run"] .run-why, .page[data-page="run"] .run-said { flex-basis: 100%; text-align: right; font-size: 12.5px; color: var(--ink-3); }
.page[data-page="run"] .run-said { color: var(--ink-2); }
/* room over the line for how far the run got, which sits over its head */
.page[data-page="run"] .run-path { padding-top: 26px; min-width: 0; }
.page[data-page="run"] .run-cmd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; min-width: 0; }
.page[data-page="run"] .run-cmd-row .cmd-box { flex: 0 1 auto; width: auto; max-width: 100%; }
.page[data-page="run"] .run-times { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.page[data-page="run"] .run-times > .fig { color: var(--ink); font-weight: 600; }
/* where the script is in its loops, after the runtime, labelled */
.page[data-page="run"] .run-loops { margin-left: 18px; white-space: nowrap; }
.page[data-page="run"] .run-loops .label { margin-right: 2px; }
.page[data-page="run"] .run-loops .fig { color: var(--ink); }
.page[data-page="run"] .run-banner .notice-text .rel { color: var(--ink-3); }
.page[data-page="run"] .run-banner .notice-error { font-size: 13px; overflow-wrap: anywhere; }
/* on the tab the notice points to, its action keeps its room unseen, so the notice and the tabs never move */
.page[data-page="run"] .run-banner .notice-here { visibility: hidden; }
.page[data-page="run"] .run-missing .empty { padding-top: 4px; }

/* tabs and their panels */
.page[data-page="run"] .run-panels { min-width: 0; padding-top: 4px; }
.page[data-page="run"] .run-panel { display: grid; gap: 40px; align-content: start; min-width: 0; }
.page[data-page="run"] .run-panel > .note { margin-bottom: -20px; }
.page[data-page="run"] .run-panel > .run-charts-note { margin: -16px 0 0; }
/* The first section under the tab strip opens on the strip's own rule: it has no rule of ink of its own over it. */
.page[data-page="run"] .run-block[data-lead] > .panel, .page[data-page="run"] .panel[data-lead] { border-top: 0; }
.page[data-page="run"] .run-block[data-lead] > .panel > .panel-head:first-child,
.page[data-page="run"] .panel[data-lead] > .panel-head:first-child { padding-top: 6px; }

/* overview: what leads it (a failure's last lines, the cost over the run, the progress), the machine it is on, one
   line of what it cost, one quiet line of what it asked for; one column, each part as wide as the page */
.page[data-page="run"] .run-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-content: start; }
.page[data-page="run"] .run-block { min-width: 0; }
.page[data-page="run"] .run-cost-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 40px; align-items: start; padding-top: 12px;
}
.page[data-page="run"] .run-block[data-lead] .run-cost-grid { padding-top: 6px; }
.page[data-page="run"] .run-cost-chart { min-width: 0; }
/* the reckoning starts level with the plot's top line, the budget under it */
.page[data-page="run"] .run-cost-side { display: grid; gap: 18px; align-content: start; justify-items: start; padding-top: 58px; min-width: 0; }
.page[data-page="run"] .run-cost-side .reckoning { font-size: 14px; column-gap: 18px; row-gap: 4px; }
.page[data-page="run"] .run-cost-side .reckoning .reckoning-rule { margin: 4px 0 3px; }
.page[data-page="run"] .run-cost-side .reckoning dd.reckoning-sum { font-size: 17px; }
.page[data-page="run"] .run-cost-note { font-size: 12.5px; color: var(--ink-3); max-width: 44ch; }
.page[data-page="run"] .run-progress-lead .panel-body { padding-top: 6px; }
.page[data-page="run"] .run-budget-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.page[data-page="run"] .run-budget-line > .label { font-size: 13px; }
/* what it cost, where it never moved: one sentence, its budget after it */
.page[data-page="run"] .run-money { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--rule); }
.page[data-page="run"] .run-block[data-lead] .run-money { border-top: 0; padding-top: 0; }
.page[data-page="run"] .run-money-line { color: var(--ink-2); max-width: 80ch; }
.page[data-page="run"] .run-money-line .fig { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* what it asked for: labelled words on one line that wraps, quiet */
.page[data-page="run"] .run-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2); }
.page[data-page="run"] .run-block[data-lead] .run-facts { border-top: 0; padding-top: 0; }
.page[data-page="run"] .run-fact { min-width: 0; overflow-wrap: anywhere; }
.page[data-page="run"] .run-fact > .label { margin-right: 4px; }
.page[data-page="run"] .run-fact .mono { color: var(--ink); }
/* the machine's readings are as old as the last answer while the console cannot reach the controller, or its node
   does not answer */
.page[data-page="run"][data-stale] .run-now .panel-body, .page[data-page="run"] .run-now[data-unseen] .run-now-use { opacity: .5; }
.page[data-page="run"] .run-now-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; }
.page[data-page="run"] .run-now-rate { font-weight: 400; color: var(--ink-2); }
.page[data-page="run"] .run-now-use { margin-top: 14px; gap: 6px 28px; }
.page[data-page="run"] .run-now-node { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 28px; margin-top: 16px; font-size: 13.5px; }
.page[data-page="run"] .run-now-fact { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.page[data-page="run"] .run-now-fact .label { font-size: 13px; }
.page[data-page="run"] .run-node { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page[data-page="run"] .run-error { color: var(--bad); overflow-wrap: anywhere; }
.page[data-page="run"] .run-budget { display: inline-flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; margin: -3px 0; }
.page[data-page="run"] .run-budget .progress { min-width: 0; }
.page[data-page="run"] .run-budget .btn-sm { margin-left: -6px; }

/* charts and system: the grid's halves, each chart under its rule */
.page[data-page="run"] .run-charts { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 44px 40px; }
.page[data-page="run"] .chart-panel { display: flex; flex-direction: column; }
.page[data-page="run"] .chart-panel .panel-body { flex: 1; padding: 12px 0 0; }
/* the moves' time down, each a bar on one scale with the paused part in ink inside it, the figures in words */
.page[data-page="run"] .run-pauses-note { margin: -4px 0 14px; max-width: 64ch; }
.page[data-page="run"] .run-pause-list { display: grid; gap: 12px; }
.page[data-page="run"] .run-pause { display: grid; grid-template-columns: minmax(96px, max-content) minmax(80px, 1fr); gap: 4px 16px; align-items: center; }
.page[data-page="run"] .run-pause-name { font-size: 13px; font-weight: 550; font-stretch: var(--label-stretch); color: var(--ink-2); white-space: nowrap; }
.page[data-page="run"] .run-pause-bar { position: relative; height: 10px; }
.page[data-page="run"] .run-pause-bar > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.page[data-page="run"] .run-pause-down { background: var(--rule-2); }
.page[data-page="run"] .run-pause-paused { background: var(--ink); }
.page[data-page="run"] .run-pause-words { grid-column: 2; font-size: 12.5px; color: var(--ink-3); }
.page[data-page="run"] .run-pause[data-off] .run-pause-name { color: var(--bad); }
.page[data-page="run"] .run-pause[data-off] .run-pause-paused { background: var(--bad); }

/* logs */
.page[data-page="run"] .log-toolbar { gap: 10px 22px; }
.page[data-page="run"] .log-search { flex: 1 1 220px; max-width: 320px; display: flex; align-items: center; gap: 10px; }
.page[data-page="run"] .log-search input { flex: 1; min-width: 0; }
.page[data-page="run"] .log-clear { flex: none; font-size: 12.5px; color: var(--ink-2); }
.page[data-page="run"] .log-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.page[data-page="run"] .run-log { min-height: 160px; max-height: calc(100vh - 360px); }
.page[data-page="run"] .run-log .log-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.page[data-page="run"] .log-none { padding: 0 14px; color: var(--ink-3); font-family: var(--font-sans); font-size: 13.5px; }
.page[data-page="run"] .log-foot { font-variant-numeric: tabular-nums; }
.page[data-page="run"] .log-error { color: var(--bad); }

/* machines: the map, then the machines and the attempts without Portal. Where a section is narrower than its table,
   the table keeps the machine (its name breaking between its parts) and its cost and reads the rest under it. */
.page[data-page="run"] .run-map { padding: 14px 0 20px; }
.page[data-page="run"] .run-machine { display: inline-flex; align-items: flex-start; gap: 10px; }
.page[data-page="run"] .run-machine .pline { margin-top: calc(.75em - 1.5px); }
.page[data-page="run"] .run-machine-words { white-space: normal; }
.page[data-page="run"] .run-fold-box { container: run-fold / inline-size; }
@container run-fold (max-width: 819px) {
  .page[data-page="run"] .table td.col-fold, .page[data-page="run"] .table th.col-fold { display: none; }
  .page[data-page="run"] .cell-fold {
    display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 1px; margin-top: 2px;
    font: 400 12.5px/1.45 var(--font-sans); color: var(--ink-2); white-space: normal;
  }
  .page[data-page="run"] .table td:has(.cell-fold) { padding-top: 7px; padding-bottom: 7px; height: auto; white-space: normal; }
}
.page[data-page="run"] .run-output { gap: 8px 16px; }

/* history: one list, newest first, along the run's line turned on its side. Each row's stretch of the rail is in the
   colour of the machine the run was on then (dotted while it waited, none before it began or after it ended); an
   interchange marks a move, a cross a move that did not land, a small stop anything else. */
.page[data-page="run"] .timeline { display: grid; min-width: 0; }
.page[data-page="run"] .tl-row {
  display: grid; grid-template-columns: 92px 18px minmax(112px, 156px) minmax(0, 1fr); gap: 0 16px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--rule); line-height: 20px;
}
.page[data-page="run"] .tl-row:last-child { border-bottom: 0; }
.page[data-page="run"] .tl-time { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.page[data-page="run"] .tl-kind { font-size: 13.5px; font-weight: 550; font-stretch: var(--label-stretch); color: var(--ink-2); overflow-wrap: anywhere; }
.page[data-page="run"] .tl-kind[data-tone="bad"] { color: var(--bad); }
.page[data-page="run"] .tl-kind[data-tone="warn"] { color: var(--warn); }
.page[data-page="run"] .tl-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.page[data-page="run"] .tl-move { color: var(--ink-3); }
.page[data-page="run"] .tl-sub { display: grid; justify-items: start; font-size: 12.5px; color: var(--ink-3); line-height: 18px; }
.page[data-page="run"] .tl-why { display: block; color: var(--ink-2); }
/* the rail spans the row's whole height, through its hairline, so the line runs on from row to row */
.page[data-page="run"] .tl-rail { position: relative; align-self: stretch; margin: -10px 0 -11px; }
.page[data-page="run"] .tl-rail::before, .page[data-page="run"] .tl-rail::after { content: ""; position: absolute; left: 7.5px; width: 3px; }
.page[data-page="run"] .tl-rail::before { top: 0; height: 20px; background: var(--above, var(--ink-4)); }
.page[data-page="run"] .tl-rail::after { top: 20px; bottom: 0; background: var(--below, var(--ink-4)); }
.page[data-page="run"] .tl-rail[data-above="wait"]::before, .page[data-page="run"] .tl-rail[data-below="wait"]::after {
  background: radial-gradient(circle, var(--ink-4) 1.2px, transparent 1.7px) 50% 1px / 3px 6px repeat-y;
}
.page[data-page="run"] .tl-rail[data-above="none"]::before, .page[data-page="run"] .tl-rail[data-below="none"]::after { display: none; }
.page[data-page="run"] .tl-rail > i { position: absolute; left: 9px; top: 20px; transform: translate(-50%, -50%); display: block; box-sizing: border-box; }
.page[data-page="run"] .tl-rail[data-mark="stop"] > i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2); }
.page[data-page="run"] .tl-rail[data-mark="move"] > i { width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); }
.page[data-page="run"] .tl-rail[data-mark="spur"] > i { width: 12px; height: 12px; }
.page[data-page="run"] .tl-rail[data-mark="spur"] > i::before, .page[data-page="run"] .tl-rail[data-mark="spur"] > i::after {
  content: ""; position: absolute; left: 5px; top: -1px; width: 2px; height: 14px; border-radius: var(--radius-cap); background: var(--bad);
  transform: rotate(45deg);
}
.page[data-page="run"] .tl-rail[data-mark="spur"] > i::after { transform: rotate(-45deg); }

/* the run's dialogs, here and on the Runs page: a machine is named with its provider's line, the colour its
   segment of the path would wear */
.run-dialog .plan-route { display: grid; gap: 8px; }
/* a label, the machine's line, then its name and price as one run of text that wraps under itself */
.run-dialog .plan-line {
  display: grid; grid-template-columns: 56px 18px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: start;
  line-height: 20px; color: var(--ink);
}
.run-dialog .plan-line > .pline { margin-top: 8.5px; }
.run-dialog .plan-label { font-size: 13px; font-weight: 500; font-stretch: var(--label-stretch); color: var(--ink-3); }
.run-dialog .plan-what { min-width: 0; overflow-wrap: anywhere; }
.run-dialog .plan-name { font-weight: 600; }
.run-dialog .plan-rate { color: var(--ink-2); margin-left: 4px; white-space: nowrap; }
.run-dialog .plan-sub-inline { grid-column: 3; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.run-dialog .plan-pick .pline { margin-left: 2px; }
.run-dialog .plan-status { font-variant-numeric: tabular-nums; }

/* the reckoning stays beside the chart until the phone's single column */
@media (max-width: 1279px) {
  .page[data-page="run"] .run-cost-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 899px) {
  .page[data-page="run"] .run-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .page[data-page="run"] .run-why, .page[data-page="run"] .run-said { text-align: left; }
  .page[data-page="run"] .run-charts { grid-template-columns: minmax(0, 1fr); }
  .page[data-page="run"] .run-cost-grid { grid-template-columns: minmax(0, 1fr); }
  .page[data-page="run"] .run-cost-side { padding-top: 18px; }
  .page[data-page="run"] .tl-row { grid-template-columns: 18px auto minmax(0, 1fr); gap: 2px 12px; }
  .page[data-page="run"] .tl-rail { grid-column: 1; grid-row: 1 / span 2; }
  .page[data-page="run"] .tl-time { grid-column: 2; grid-row: 1; }
  .page[data-page="run"] .tl-kind { grid-column: 3; grid-row: 1; }
  .page[data-page="run"] .tl-text { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 599px) {
  .page[data-page="run"] .run-log { max-height: 60vh; }
  .page[data-page="run"] .run-times { width: 100%; }
  .page[data-page="run"] .run-now-use { display: grid; gap: 2px; }
}