/* castomFLOW — runs (views/runs.js, run-view.js). Only what castomo-dashkit does not already draw. */

/* ---------- Badges ----------
   A status or an outcome says itself three ways: the word, the tone and an
   icon. The icon stands where the kit's dot would, so the dot goes. */
.rn-badge::before { content: none; }
.rn-badge .ci { --ci-size: 14px; color: var(--tone); }
:root[data-theme^="contrast"] .rn-badge .ci { color: currentColor; }
.rn-paid { gap: var(--s-2); }
.rn-paid .ci { --ci-size: 14px; }

.rn-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.rn-inline .ci { --ci-size: 16px; color: var(--ink-3); }
.rn-lead { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.rn-cell-badges { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* Machine words inside a sentence — a field, a value a rule read, an id. */
:is(.rn-log, .rn-fields, .rn-facts) code {
  padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--field);
  font: 500 var(--t-1) / 1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

/* Links in running text are underlined (house rule); the kit's buttons keep their own look. */
:is(.rn-log, .rn-record-links) a:not(.btn) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Filters ---------- */
.rn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.rn-filters .select { flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
/* 560: the kit's step where a form row goes to one column — the workflow list takes its own row. */
@media (max-width: 560px) {
  .rn-filters .select { flex-basis: 100%; max-width: none; }
}

/* ---------- The runs table ---------- */
.rn-table .rn-where { min-width: 12rem; color: var(--ink-2); }
.rn-table time { white-space: nowrap; }
/* 720 is the kit's own step for a table becoming cards (dashkit.css, the table section): the reason a run
   stopped is a sentence, so on a card it reads under its label, from the start, not pushed to the end. */
@media (max-width: 720px) {
  .rn-table td.rn-where { display: grid; gap: var(--s-2); min-width: 0; text-align: start; }
  .rn-table td.shrink { white-space: normal; }
}

/* ---------- A run's log: one row per step ---------- */
.rn-log { display: grid; gap: var(--s1); }
.rn-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.rn-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s0) var(--s1);
  padding-block: var(--s1);
}
.rn-step + .rn-step { border-top: var(--rule-w) solid var(--rule); }
.rn-step-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink-2);
}
.rn-step-mark .ci { --ci-size: 18px; }
/* The mark takes the outcome's tone for the steps a reader scans for; the badge beside it says the word. */
.rn-step[data-outcome="failed"] .rn-step-mark { background: color-mix(in oklab, var(--bad) 14%, var(--paper-2)); color: var(--bad); }
.rn-step:is([data-outcome="held"], [data-outcome="retrying"]) .rn-step-mark { background: color-mix(in oklab, var(--warn) 16%, var(--paper-2)); color: var(--ink); }
.rn-step:is([data-outcome="intention"], [data-outcome="waiting"], [data-outcome="next"]) .rn-step-mark { background: color-mix(in oklab, var(--info) 12%, var(--paper-2)); color: var(--info); }
.rn-step[data-outcome="goal"] .rn-step-mark { background: color-mix(in oklab, var(--ok) 14%, var(--paper-2)); color: var(--ok); }
/* The step chosen on the canvas: a tint and a rule on its leading edge, never the tint alone. */
.rn-step[aria-current="step"] {
  margin-inline: calc(-1 * var(--s1));
  padding-inline: calc(var(--s1) - 3 * var(--rule-w)) var(--s1);
  border-inline-start: calc(3 * var(--rule-w)) solid var(--accent-ink);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
}

.rn-step-body { display: grid; gap: var(--s0); min-width: 0; }
.rn-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); min-height: 36px; }
.rn-step-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.rn-step-time { margin-inline-start: auto; color: var(--ink-3); font-size: var(--t-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-step-kind { margin-top: calc(-1 * var(--s0)); color: var(--ink-3); font-size: var(--t-1); }
.rn-note, .rn-reason { margin: 0; max-width: var(--measure); color: var(--ink-2); }
.rn-reason { color: var(--ink); }
.rn-intention { color: var(--ink); font-weight: 650; }
.rn-read { display: grid; gap: var(--s-1); margin: 0; padding-inline-start: var(--s2); color: var(--ink-2); }
.rn-read b { color: var(--ink); }
.rn-step-body > .btn-row { margin-top: var(--s-2); }

.rn-attempts { display: grid; gap: var(--s0); margin: 0; padding: 0; list-style: none; }
.rn-attempts > li { display: grid; gap: var(--s-1); padding-inline-start: var(--s1); border-inline-start: var(--rule-w) solid var(--rule); }
.rn-attempt-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); color: var(--ink-3); font-size: var(--t-1); }

/* ---------- Deciding about a held run ----------
   A box inside a card marks itself with a tint and a rule on its leading edge
   (§0.32). On the run screen it is a card of its own, and the card wears them. */
.rn-decide {
  display: grid;
  gap: var(--s1);
  padding: var(--s2);
  border-inline-start: calc(3 * var(--rule-w)) solid var(--warn);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warn) 10%, var(--paper-2));
}
.rn-decide[data-tone="quiet"] { border-inline-start-color: var(--rule-strong); background: var(--field); }
.rn-decide p { margin: 0; max-width: var(--measure); }
.rn-decide-title { display: flex; align-items: center; gap: var(--s0); margin: 0; color: var(--ink); font-size: var(--t1); }
.rn-choices { display: grid; gap: var(--s-1); margin: 0; padding-inline-start: var(--s2); }
.rn-step > .rn-decide { grid-column: 1 / -1; }
.rn-decide-card { border-inline-start: calc(3 * var(--rule-w)) solid var(--warn); background: color-mix(in oklab, var(--warn) 7%, var(--paper-2)); }
.rn-decide-card:has(> .rn-decide[data-tone="quiet"]) { border-inline-start-color: var(--rule-strong); background: var(--paper-2); }
.rn-decide-card > .rn-decide { padding: 0; border: 0; border-radius: 0; background: none; }
:root[data-theme^="contrast"] .rn-step > .rn-decide { outline: var(--rule-w) solid var(--ink); }
/* 400: the kit's step where the page's card runs edge to edge (§4d) — the panel in the log bleeds to the
   card's edge too, so its words keep the one inset the card gives them; its rules move to top and bottom. */
@media (max-width: 400px) {
  .rn-step > .rn-decide {
    margin-inline: calc(-1 * var(--card-pad));
    padding-inline: var(--card-pad);
    border-inline-start: 0;
    border-block: calc(3 * var(--rule-w)) solid var(--warn);
    border-radius: 0;
  }
  .rn-step > .rn-decide[data-tone="quiet"] { border-block-color: var(--rule-strong); }
  .rn-decide-card { border-inline-start: 0; }
}

/* ---------- Trouble ---------- */
.rn-groups > li { display: grid; align-items: start; gap: var(--s0); padding-block: var(--s2); }
.rn-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.rn-group-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.rn-group-count { margin-inline-start: auto; color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.rn-recovered { display: flex; align-items: center; gap: var(--s0); margin: var(--s1) 0 0; color: var(--ink-2); }
.rn-recovered .ci { color: var(--ok); }

/* ---------- Records ---------- */
.rn-collections > li { padding-block: var(--s-2); }
.rn-collection { display: flex; flex: 1; align-items: center; gap: var(--s1); min-width: 0; padding-block: var(--s0); }
.rn-collection[aria-current="true"] { background: var(--accent-wash); }
.rn-collection[aria-current="true"] b { color: var(--accent-ink); }
.rn-collection .list-main b { overflow-wrap: anywhere; }
.rn-records { display: grid; margin: 0; padding: 0; list-style: none; }
.rn-record { display: grid; gap: var(--s0); padding-block: var(--s1); }
.rn-record + .rn-record { border-top: var(--rule-w) solid var(--rule); }
.rn-record-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s0) var(--s1); color: var(--ink-3); font-size: var(--t-1); }
.rn-record-links { display: flex; flex-wrap: wrap; gap: var(--s1); }
.rn-fields { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: var(--s-1) var(--s1); margin: 0; }
.rn-fields > div { display: contents; }
.rn-fields dt { color: var(--ink-3); font-size: var(--t-1); font-weight: 600; overflow-wrap: anywhere; }
.rn-fields dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* 400: the kit's narrowest step — a name and its value stack, so neither is squeezed a word per line. */
@media (max-width: 400px) {
  .rn-fields { grid-template-columns: minmax(0, 1fr); }
  .rn-fields dd { margin-bottom: var(--s-1); }
}