/* Camel's design tokens (docs/ui.md). Colours come from survey and
   hydrographic charts; light and dark are both defined on :root, the dark set
   applying under prefers-color-scheme unless the viewer chose a theme
   (data-theme on the root element). */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #eef0ea;
  --sheet: #f8f9f5;
  --ink: #1a2629;
  --ink-soft: #5b6865;
  --contour: #c7ccc2;
  --route: #1f6f78;
  --load: #a86c1e;
  --clear: #3d7a4f;
  --fault: #b23a2e;
  --hold: #7d7a5c;
  /* Text set on a solid status fill. */
  --on-fill: #f8f9f5;
  --scrim: rgb(21 28 29 / 0.32);
  --shadow-float: 0 1px 2px rgb(21 28 29 / 0.12),
    0 8px 24px rgb(21 28 29 / 0.14);

  --wash: color-mix(in srgb, var(--route) 7%, transparent);
  /* Running work that has ended, its outcome not yet known. */
  --route-muted: color-mix(in srgb, var(--route) 55%, var(--sheet));
  --hatch: repeating-linear-gradient(
    135deg,
    var(--hold) 0 1.5px,
    transparent 1.5px 5px
  );

  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  /* Width carries hierarchy: condensed for dense tables and numbers,
     narrower still for lane labels. */
  --condensed: 84%;
  --narrow: 80%;

  --text-11: 11px;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-21: 21px;
  --text-28: 28px;
  --text-36: 36px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius encodes kind: bars are square, controls 4 px, overlays 8 px. */
  --radius-control: 4px;
  --radius-overlay: 8px;

  --rail: 176px;
  --bar: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151c1d;
    --sheet: #1c2526;
    --ink: #dce3de;
    --ink-soft: #9aa7a2;
    --contour: #34403f;
    --route: #4fa9b2;
    --load: #d59a4a;
    --clear: #6fb282;
    --fault: #e07a6c;
    --hold: #b3af8a;
    --on-fill: #151c1d;
    --scrim: rgb(0 0 0 / 0.5);
    --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151c1d;
  --sheet: #1c2526;
  --ink: #dce3de;
  --ink-soft: #9aa7a2;
  --contour: #34403f;
  --route: #4fa9b2;
  --load: #d59a4a;
  --clear: #6fb282;
  --fault: #e07a6c;
  --hold: #b3af8a;
  --on-fill: #151c1d;
  --scrim: rgb(0 0 0 / 0.5);
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
}
/* Elements. No classes anywhere: components are styled by their structure,
   ARIA state and data-state / data-kind (docs/ui.md, "Markup and
   styling"). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-14) / 21px var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-36);
  line-height: 40px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-21);
  line-height: 28px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-16);
  line-height: 21px;
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  max-width: 75ch;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--route);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Machine values, and only they, are monospace. */
code,
pre,
samp,
kbd {
  font-family: var(--mono);
  font-size: 0.875em;
}

pre {
  margin: 0;
}

pre > code,
pre > samp {
  font-size: inherit;
}

time,
data,
output,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

small {
  font-size: var(--text-12);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--route);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--route) 28%, transparent);
}

svg {
  flex: none;
}

/* A status mark: the state's shape, then its word. The word carries the
   meaning; shape and colour repeat it. */
data[data-state] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  white-space: nowrap;
}

data[data-state]::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
}

[data-state="running"]::before {
  background: var(--route);
}

/* A step of a running attempt that ended before its outcome is known. */
[data-state="ended"]::before {
  background: var(--route-muted);
}

/* Data in motion: solid like running work, in the colour of loads. */
[data-state="moving"]::before {
  background: var(--load);
}

[data-state="succeeded"]::before {
  background: var(--clear);
}

[data-state="queued"]::before {
  box-shadow: inset 0 0 0 1.5px var(--hold);
}

[data-state="waiting"]::before {
  background: var(--hatch);
  box-shadow: inset 0 0 0 1px var(--hold);
}

[data-state="failed"]::before {
  background: var(--fault);
  clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}

[data-state="cancelled"]::before {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100% 1.5px
      no-repeat,
    var(--contour);
}

[data-state="lost"]::before {
  background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100%
    1.5px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
}

[data-state="skipped"]::before {
  outline: 1px dashed var(--ink-soft);
  outline-offset: -1px;
}

/* Agents: a ring when idle, struck through when offline. */
data[data-state="idle"]::before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--route);
}

data[data-state="offline"]::before {
  border-radius: 50%;
  background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100%
    1.5px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* The frame: the element holding <main>. A top bar across, the rail of
   sections down the left, the page on a raised sheet. Below 720 px the rail
   becomes a tab strip under the top bar. */

div:has(> main) {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: var(--bar) minmax(0, 1fr);
  grid-template-areas: "bar bar" "rail main";
  min-height: 100vh;
  min-height: 100dvh;
}

div:has(> main):not(:has(> nav)) {
  grid-template-areas: "bar bar" "main main";
}

/* Top bar */

div:has(> main) > header {
  grid-area: bar;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding-right: var(--space-4);
  border-bottom: 1px solid var(--contour);
  background: var(--paper);
}

/* The brand sits over the rail, sharing its edge. */
div:has(> main) > header > a:first-child {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: var(--rail);
  padding: 0 var(--space-4);
  border-right: 1px solid var(--contour);
  color: var(--ink);
  font-size: var(--text-16);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

div:has(> main) > header > a:first-child > svg {
  width: 20px;
  height: 14px;
  fill: var(--ink);
}

div:has(> main) > header > a:first-child > svg > rect:nth-child(2) {
  fill: var(--route);
}

div:has(> main) > header > a:first-child:focus-visible {
  outline-offset: -4px;
}

/* The project: a fixed label or the switcher. */
div:has(> main) > header > p:not([data-state]) {
  display: flex;
  align-items: center;
  min-width: 0;
  font-weight: 600;
}

div:has(> main) > header > p:not([data-state]) > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

div:has(> main) > header > p > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

div:has(> main) > header > p > select {
  min-height: 32px;
  max-width: 220px;
  padding: 0 var(--space-6) 0 var(--space-2);
  border-color: transparent;
  background-color: transparent;
  font-weight: 600;
}

div:has(> main) > header > p > select:hover {
  border-color: var(--contour);
}

/* The connection: a dot shaped by its state, then words. */
div:has(> main) > header > p[data-state] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  min-width: 0;
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

div:has(> main) > header > p[data-state]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

div:has(> main) > header > p[data-state="live"]::before {
  background: var(--route);
}

div:has(> main) > header > p[data-state="reconnecting"]::before {
  box-shadow: inset 0 0 0 1.5px var(--hold);
}

div:has(> main) > header > p[data-state="offline"]::before {
  background: linear-gradient(var(--fault), var(--fault)) center / 100% 1.5px
    no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--fault);
}

div:has(> main) > header > p[data-state="offline"] {
  color: var(--ink);
}

/* The account menu */

div:has(> main) > header > details {
  position: relative;
  flex: none;
}

div:has(> main) > header > p:not([data-state]) + details,
div:has(> main) > header > a:first-child + details {
  margin-left: auto;
}

div:has(> main) > header > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 180px;
  min-height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  white-space: nowrap;
}

div:has(> main) > header > details > summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

div:has(> main) > header > details > summary::-webkit-details-marker {
  display: none;
}

div:has(> main) > header > details > summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

div:has(> main) > header > details > summary:hover,
div:has(> main) > header > details[open] > summary {
  background: var(--wash);
}

div:has(> main) > header > details > section {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-4);
  width: 280px;
  padding: var(--space-4);
  border: 1px solid var(--contour);
  border-radius: var(--radius-overlay);
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

div:has(> main) > header > details > section > dl {
  display: grid;
  gap: var(--space-2);
}

div:has(> main) > header > details > section > dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Rail */

div:has(> main) > nav {
  grid-area: rail;
  padding: var(--space-4) var(--space-2);
  border-right: 1px solid var(--contour);
  background: var(--paper);
}

div:has(> main) > nav > ol {
  position: sticky;
  top: calc(var(--bar) + var(--space-4));
  display: grid;
  gap: 2px;
  list-style: none;
}

div:has(> main) > nav a {
  display: block;
  padding: 6px var(--space-3);
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
}

div:has(> main) > nav a:hover {
  background: var(--wash);
  color: var(--ink);
}

div:has(> main) > nav a[aria-current="page"] {
  background: var(--sheet);
  box-shadow: inset 2px 0 0 var(--route);
  color: var(--ink);
  font-weight: 600;
}

div:has(> main) > nav a:focus-visible {
  outline-offset: -2px;
}

/* The page */

main {
  grid-area: main;
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-7);
  background: var(--sheet);
}

/* The live region is read, not seen. */
div:has(> main) > p[role="status"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 719px) {
  div:has(> main),
  div:has(> main):not(:has(> nav)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar" "rail" "main";
  }

  div:has(> main):not(:has(> nav)) {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "bar" "main";
  }

  div:has(> main) > header {
    position: static;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    min-height: var(--bar);
    padding: var(--space-1) var(--space-4);
  }

  div:has(> main) > header > a:first-child {
    width: auto;
    min-height: 40px;
    padding: 0;
    border-right: 0;
  }

  div:has(> main) > header > details > summary {
    max-width: 128px;
  }

  div:has(> main) > header > p > select {
    max-width: 40vw;
    padding-right: var(--space-5);
  }

  /* The connection takes its own line under the bar's controls. */
  div:has(> main) > header > p[data-state] {
    order: 1;
    flex-basis: 100%;
    margin-left: 0;
    padding-bottom: var(--space-1);
  }

  div:has(> main) > header > details > section {
    position: fixed;
    top: auto;
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
    margin-top: var(--space-2);
  }

  div:has(> main) > nav {
    padding: 0 var(--space-2);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--contour);
  }

  div:has(> main) > nav > ol {
    position: static;
    display: flex;
    gap: 0;
  }

  div:has(> main) > nav a {
    padding: 10px var(--space-3);
    white-space: nowrap;
  }

  div:has(> main) > nav a[aria-current="page"] {
    background: none;
    box-shadow: inset 0 -2px 0 var(--route);
  }

  main {
    padding: var(--space-4) var(--space-4) var(--space-7);
  }
}

/* Skipping to the page: out of sight until the keyboard reaches it. */
div:has(> main) > button[data-kind="skip"] {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 30;
  transform: translateY(-200%);
}

div:has(> main) > button[data-kind="skip"]:focus-visible {
  transform: none;
}

main:focus {
  outline: none;
}
/* Buttons, fields, selects. Controls take the 4 px radius. Base rules sit in
   :where() so components (tabs, strips, table headers) restyle them without
   a specificity contest. */

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--contour);
  border-radius: var(--radius-control);
  background: var(--sheet);
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

:where(button):hover {
  border-color: var(--ink-soft);
}

:where(button)[data-kind="primary"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--sheet);
}

:where(button)[data-kind="danger"] {
  border-color: var(--fault);
  background: var(--fault);
  color: var(--on-fill);
}

:where(button)[data-kind="primary"]:hover,
:where(button)[data-kind="danger"]:hover {
  filter: brightness(1.12);
}

:where(button)[data-kind="quiet"] {
  min-height: 28px;
  padding: 0 var(--space-1);
  border-color: transparent;
  background: none;
  color: var(--route);
}

:where(button)[data-kind="quiet"]:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(button):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(button)[aria-busy="true"] {
  cursor: progress;
}

:where(button)[aria-busy="true"]::after {
  content: "…";
}

:where(input:not([type="radio"], [type="checkbox"]), select, textarea) {
  width: 100%;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-control);
  background: var(--sheet);
}

:where(input, select, textarea):hover {
  border-color: var(--ink);
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--fault);
  box-shadow: inset 0 0 0 1px var(--fault);
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  accent-color: var(--route);
}

/* A field: label, control, then the note (hint or error). */
form > p {
  display: grid;
  gap: var(--space-1);
  max-width: 420px;
}

form > p > label {
  font-weight: 500;
}

form > p > small {
  min-height: 18px;
  color: var(--ink-soft);
  line-height: 18px;
}

form > p:has(> [aria-invalid="true"]) > small {
  color: var(--fault);
}

form {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

form > p,
form > fieldset {
  justify-self: stretch;
}

form > footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--ink-soft);
  font-size: var(--text-12);
}

fieldset > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Quantities: a meter for storage, a progress for a transfer. */
figure:has(> meter),
figure:has(> progress) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  max-width: 480px;
  margin: 0;
}

figure:has(> meter) > p,
figure:has(> progress) > p {
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

figure > meter,
figure > progress {
  grid-column: 1 / -1;
  grid-row: 2;
}

meter,
progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--contour);
  color: var(--load);
}

meter::-webkit-meter-bar {
  height: 8px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--contour);
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value {
  background: var(--load);
}

meter::-webkit-meter-even-less-good-value {
  background: var(--fault);
}

meter::-moz-meter-bar {
  background: var(--load);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--fault);
}

progress::-webkit-progress-bar {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--contour);
}

progress::-webkit-progress-value {
  background: var(--load);
}

progress::-moz-progress-bar {
  background: var(--load);
}

/* Size unknown yet: hatched, like work that waits. */
progress:indeterminate {
  background: repeating-linear-gradient(
    135deg,
    var(--load) 0 1.5px,
    transparent 1.5px 5px
  );
}

progress:indeterminate::-webkit-progress-bar {
  background: transparent;
}

progress:indeterminate::-moz-progress-bar {
  background: transparent;
}
/* The signature element. A strip is an ordered list of steps; each step is
   as wide as its time on the track's scale (--share), as wide as its label
   while others are timed (--share: auto), or shares the track when none is
   (--grow). Bars are square-ended and their shape says their state:
   running solid with a bright leading edge, queued an outline, waiting
   hatched, failed notched, cancelled and lost struck through. */

ol[data-kind="strip"] {
  display: flex;
  gap: 2px;
  height: 24px;
  min-width: 0;
  list-style: none;
  /* An empty track is a contour line. */
  background: linear-gradient(var(--contour), var(--contour)) 0 50% / 100% 1px
    no-repeat;
}

ol[data-kind="strip"] > li {
  position: relative;
  display: flex;
  align-items: center;
  flex: var(--grow, 0) 1 var(--share, 0%);
  min-width: 6px;
  padding: 0 6px;
  overflow: hidden;
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--text-11);
  font-stretch: var(--narrow);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  transition: flex-basis 1s linear;
}

ol[data-kind="strip"] > li > span,
ol[data-kind="strip"] > li > button {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

ol[data-kind="strip"] > li > button {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

ol[data-kind="strip"] > li > button:focus-visible {
  outline-offset: -2px;
}

/* The words for a screen reader; the title shows them on hover. */
ol[data-kind="strip"] > li > small {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

ol[data-kind="strip"] > li > small > span {
  display: block;
  width: 1px;
  overflow: hidden;
}

ol[data-kind="strip"] > [data-state="running"] {
  background: var(--route);
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--on-fill) 55%, transparent);
  color: var(--on-fill);
}

ol[data-kind="strip"] > [data-state="ended"] {
  background: var(--route-muted);
  color: var(--ink);
}

/* Progress not reported: a plain contour outline. */
ol[data-kind="strip"] > li:not([data-state]) {
  box-shadow: inset 0 0 0 1px var(--contour);
  font-weight: 500;
}

ol[data-kind="strip"] > [data-state="succeeded"] {
  background: var(--clear);
  color: var(--on-fill);
}

ol[data-kind="strip"] > [data-state="queued"] {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--hold);
}

ol[data-kind="strip"] > [data-state="waiting"] {
  background: var(--hatch), var(--sheet);
  box-shadow: inset 0 0 0 1px var(--hold);
}

ol[data-kind="strip"] > [data-state="waiting"] > :is(span, button) {
  flex: 0 1 auto;
  padding: 0 3px;
  background: var(--sheet);
  line-height: 16px;
}

ol[data-kind="strip"] > [data-state="failed"] {
  padding-right: 12px;
  background: var(--fault);
  color: var(--on-fill);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 7px) 50%,
    100% 100%,
    0 100%
  );
}

ol[data-kind="strip"] > :is([data-state="cancelled"], [data-state="lost"])::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ink-soft);
}

ol[data-kind="strip"] > [data-state="cancelled"] {
  background: var(--contour);
  color: var(--ink-soft);
}

ol[data-kind="strip"] > [data-state="lost"] {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
  color: var(--ink-soft);
}

ol[data-kind="strip"] > [data-state="skipped"] {
  background: var(--sheet);
  outline: 1px dashed var(--ink-soft);
  outline-offset: -1px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* The selected step carries an ink rule beneath it. */
ol[data-kind="strip"] > li:has(> button[aria-current="step"]) {
  box-shadow: inset 0 -3px 0 var(--ink);
}

ol[data-kind="strip"] > [data-state="running"]:has(> button[aria-current="step"]) {
  box-shadow:
    inset -3px 0 0 color-mix(in srgb, var(--on-fill) 55%, transparent),
    inset 0 -3px 0 var(--ink);
}

ol[data-kind="strip"] > [data-state="queued"]:has(> button[aria-current="step"]) {
  box-shadow:
    inset 0 0 0 1.5px var(--hold),
    inset 0 -3px 0 var(--ink);
}

ol[data-kind="strip"] > :is([data-state="succeeded"], [data-state="failed"], [data-state="ended"]):has(> button[aria-current="step"]) {
  box-shadow: inset 0 -3px 0 var(--ink);
}

ol[data-kind="strip"] > li > button:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lanes: one item per agent, one row per slot, the strips on one scale. */

ol[data-kind="lanes"] {
  list-style: none;
  border-top: 1px solid var(--ink);
}

ol[data-kind="lanes"] > li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--contour);
}

ol[data-kind="lanes"] > li > h3 {
  overflow: hidden;
  font-size: var(--text-14);
  font-stretch: var(--condensed);
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ol[data-kind="lanes"] > li > p {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: var(--text-12);
  line-height: 24px;
}

ol[data-kind="lanes"] > li[data-state="offline"] > h3 {
  color: var(--ink-soft);
}

ol[data-kind="lanes"] > li > ol {
  grid-column: 2;
  display: grid;
  gap: 6px;
  list-style: none;
}

ol[data-kind="lanes"] > li > ol:empty {
  display: none;
}

ol[data-kind="lanes"] > li > ol > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 168px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-12);
  font-stretch: var(--condensed);
}

ol[data-kind="lanes"] > li > ol > li > span {
  color: var(--ink-soft);
}

ol[data-kind="lanes"] > li > ol > li > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ol[data-kind="lanes"] > li > ol > li > p {
  color: var(--ink-soft);
}

ol[data-kind="lanes"] > li > ol > li > ol[data-kind="strip"] {
  grid-column: 3;
  grid-row: 1;
}

ol[data-kind="lanes"] > li > ol > li > time {
  grid-column: 4;
  text-align: right;
}

@media (max-width: 719px) {
  ol[data-kind="lanes"] > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  ol[data-kind="lanes"] > li > :is(p, ol) {
    grid-column: 1;
  }

  ol[data-kind="lanes"] > li > ol > li {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-2);
  }

  ol[data-kind="lanes"] > li > ol > li > ol[data-kind="strip"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  ol[data-kind="lanes"] > li > ol > li > time {
    grid-column: 3;
  }
}
/* Condensed data tables: 12/18 at a condensed width, numbers right-aligned
   in tabular figures, an ink rule under the header and contour rules
   between rows. On phones each row stacks, each cell under its column's
   name. */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-12);
  font-stretch: var(--condensed);
  line-height: 18px;
}

caption {
  padding-bottom: var(--space-2);
  font-size: var(--text-14);
  font-stretch: 100%;
  font-weight: 600;
  text-align: left;
}

thead th {
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--ink);
  color: var(--ink-soft);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

thead th > button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  gap: 4px;
}

thead th > button::after {
  content: "↓";
  opacity: 0;
}

thead th > button:hover::after {
  opacity: 0.5;
}

thead th[aria-sort="ascending"],
thead th[aria-sort="descending"] {
  color: var(--ink);
}

thead th[aria-sort="ascending"] > button::after {
  content: "↑";
  opacity: 1;
}

thead th[aria-sort="descending"] > button::after {
  opacity: 1;
}

tbody :is(th, td) {
  padding: 7px var(--space-3);
  border-bottom: 1px solid var(--contour);
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}

tbody th {
  font-weight: 600;
}

:is(th, td):first-child {
  padding-left: 0;
}

:is(th, td):last-child {
  padding-right: 0;
}

:is(th, td)[data-numeric] {
  text-align: right;
}

thead th[data-numeric] > button {
  flex-direction: row-reverse;
}

tbody tr:hover {
  background: var(--wash);
}

tbody tr:focus-visible {
  outline-offset: -2px;
}

tbody :is(th, td) code {
  font-size: 11.5px;
}

tbody td > span:has(> a) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

tbody td > button {
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--text-12);
}

@media (max-width: 719px) {
  table,
  tbody,
  tbody tr,
  tbody th,
  tbody td {
    display: block;
  }

  /* Each cell carries its column's name instead; sorting waits for a
     wider screen. */
  thead {
    display: none;
  }

  tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--contour);
  }

  tbody tr:first-child {
    border-top: 1px solid var(--ink);
  }

  tbody :is(th, td),
  tbody :is(th, td):first-child,
  tbody :is(th, td):last-child {
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  tbody th {
    grid-column: 1 / -1;
    font-size: var(--text-14);
    font-stretch: 100%;
  }

  tbody td[data-numeric] {
    text-align: left;
  }

  tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-soft);
    font-size: var(--text-11);
  }
}

/* A marker beside a name, such as the credential the viewer is signed in
   with, is quieter than the name. Row actions sit in a span (pages.css). */

tbody th > span > small {
  margin-left: var(--space-2);
  padding: 0 6px;
  border: 1px solid var(--contour);
  border-radius: var(--radius-control);
  color: var(--ink-soft);
  font-size: var(--text-11);
  font-weight: 500;
}
/* What floats above the page takes the 8 px radius and the only shadows:
   dialogs, menus and toasts. */

dialog {
  width: min(440px, calc(100vw - 32px));
  padding: var(--space-5);
  border: 1px solid var(--contour);
  border-radius: var(--radius-overlay);
  background: var(--sheet);
  box-shadow: var(--shadow-float);
  color: var(--ink);
}

dialog::backdrop {
  background: var(--scrim);
}

dialog > h2 {
  margin-bottom: var(--space-2);
}

dialog > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Toasts */

div:has(> main) > aside {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

div:has(> main) > aside > ol {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

div:has(> main) > aside > ol > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3) 10px var(--space-4);
  border-radius: var(--radius-overlay);
  background: var(--ink);
  box-shadow: var(--shadow-float);
  color: var(--sheet);
  pointer-events: auto;
  animation: toast-in 160ms ease-out;
}

div:has(> main) > aside > ol > li > p {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

div:has(> main) > aside > ol > li > button[data-kind] {
  color: inherit;
  font-size: var(--text-12);
}

div:has(> main) > aside > ol > li[data-tone="problem"] {
  border: 1px solid var(--fault);
  background: var(--sheet);
  box-shadow:
    inset 4px 0 0 var(--fault),
    var(--shadow-float);
  color: var(--ink);
}

div:has(> main) > aside > ol > li[data-tone="problem"] > button[data-kind] {
  color: var(--route);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Dialogs whose content follows a subject or a phase: the content sits in
   a div, a grid with the dialog's rhythm. One that hands over commands or
   a secret is wider, so they read in full. */

dialog > div > h2 {
  margin-bottom: var(--space-2);
}

dialog div:not([hidden]) {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

dialog:has(figure) {
  width: min(600px, calc(100vw - 32px));
}

dialog footer {
  display: flex;
  flex-wrap: wrap;
  justify-self: stretch;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

dialog form > p {
  max-width: none;
}

/* Steps to follow elsewhere, in order, keeping the list's own numbers. */
dialog ol {
  display: grid;
  gap: var(--space-4);
  padding-left: var(--space-5);
}

dialog ol > li {
  padding-left: var(--space-1);
}

dialog ol > li > * + * {
  margin-top: var(--space-2);
}

dialog ol > li::marker {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Fields shown or hidden with a choice keep the field's layout. */
dialog form > div > p {
  display: grid;
  gap: var(--space-1);
}

dialog form > div > p > label,
dialog form > fieldset > legend {
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 500;
}

dialog form > div > p > small,
dialog form > fieldset > small {
  min-height: 18px;
  color: var(--ink-soft);
  line-height: 18px;
}

dialog form > fieldset > small {
  flex: 1 1 100%;
}

/* Something to read before going on. What went wrong is a form's alert
   (pages.css). */
main p[data-tone="warning"] {
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--load) 9%, var(--sheet));
  box-shadow: inset 3px 0 0 var(--load);
  font-weight: 500;
}

/* A machine value to copy: the value, its copy button beside it, and a
   status line once there is something to say. */
figure:has(> pre > code) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  margin: 0;
}

figure:has(> pre > code) > figcaption {
  grid-column: 1 / -1;
}

figure:has(> pre > code) > pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

figure:has(> pre > code) > button {
  min-width: 72px;
  min-height: 44px;
}

figure:has(> pre > code) > small {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--text-12);
  line-height: 18px;
}

figure:has(> pre > code) > small:empty {
  display: none;
}

dialog form > div {
  justify-self: stretch;
}
/* Pages: the header every page opens with, sections, the run page's steps
   and log, tabs, empty and error states, and the design-system specimen. */

/* The page header: the title, what sits beside it, then full-width facts,
   an explanation and the step strip. */
main header:has(> h1) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--contour);
}

main header:has(> h1) > h1 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

main header:has(> h1) > h1 + p {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

main header:has(> h1) > :is(dl, div:has(> dl), ol, p:not(h1 + p)) {
  flex: 1 1 100%;
}

main header:has(> h1) > p:not(h1 + p) {
  color: var(--ink-soft);
}

main header:has(> h1) > ol[data-kind="strip"] {
  height: 28px;
  margin-top: var(--space-1);
}

main header:has(> h1) > ol[data-kind="strip"] > li {
  line-height: 28px;
}

/* Facts: each term over its value, in a wrapping row. */
dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

dl > div {
  display: grid;
  align-content: start;
  min-width: 0;
}

dt {
  color: var(--ink-soft);
  font-size: var(--text-12);
  line-height: 18px;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Prose and forms after the page header flow with a steady gap. */
main header:has(> h1) ~ :is(p, form, section[role="alert"]) {
  margin-bottom: var(--space-5);
}

main section > h2 {
  margin-bottom: var(--space-3);
}

main section[aria-labelledby] + section[aria-labelledby]:not([role="tabpanel"]),
main section[aria-label] + section[aria-labelledby] {
  margin-top: var(--space-6);
}

main section[aria-labelledby] > dl ~ p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

main pre {
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--contour);
  background: var(--paper);
  font-size: var(--text-12);
  line-height: 18px;
}

/* Waiting for a first answer. */
main p[aria-busy="true"] {
  color: var(--ink-soft);
}

/* Empty and error states */

section[data-kind="empty"] {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 64ch;
  padding: var(--space-5) 0;
}

section[data-kind="empty"] > pre {
  justify-self: stretch;
}

section[role="alert"] {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  max-width: 64ch;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--fault) 6%, var(--sheet));
  box-shadow: inset 3px 0 0 var(--fault);
}

section[role="alert"] > h2 {
  margin: 0;
  font-size: var(--text-16);
}

/* The run page: steps beside the selected step's log. */

main section:has(> ol + section) {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  margin: var(--space-5) 0;
  border-top: 1px solid var(--contour);
  border-bottom: 1px solid var(--contour);
}

main section:has(> ol + section) > ol {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-right: 1px solid var(--contour);
  list-style: none;
}

main section:has(> ol + section) > ol > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

main section:has(> ol + section) > ol > li:has(> button[aria-current="step"]) {
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--ink);
}

main section:has(> ol + section) > ol > li > button {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
}

main section:has(> ol + section) > ol > li > button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

main section:has(> ol + section) > ol > li > data {
  color: var(--ink-soft);
  font-size: var(--text-12);
}

main section:has(> ol + section) > ol > li > small {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

main section:has(> ol + section) > section {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
}

main section:has(> ol + section) > section > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

main section:has(> ol + section) > section > header > h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-16);
}

main section:has(> ol + section) > section > header > p {
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

main section:has(> ol + section) > section > p {
  color: var(--ink-soft);
}

main section:has(> ol + section) > section > p[data-tone="problem"] {
  padding-left: var(--space-3);
  box-shadow: inset 2px 0 0 var(--fault);
  color: var(--ink);
}

main section:has(> ol + section) > section > pre {
  min-height: 160px;
  max-height: 60vh;
  overflow: auto;
  overflow-anchor: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}

/* Now: the lanes open the page under its title, and one fact a line
   follows them: its mark and term, what it says, and a link to where it is
   resolved. */

main header:has(> h1):has(+ section[aria-label] > ol[data-kind="lanes"]) {
  margin-bottom: var(--space-3);
  padding-bottom: 0;
  border-bottom: 0;
}

main section:has(> dl[data-kind="lines"]),
main section:has(> dl[data-kind="lines"]) > p {
  margin-top: var(--space-5);
}

main section:has(> dl[data-kind="lines"]) > p {
  color: var(--ink-soft);
}

dl[data-kind="lines"] {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 0;
  border-top: 1px solid var(--ink);
}

dl[data-kind="lines"] > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  column-gap: var(--space-5);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--contour);
}

dl[data-kind="lines"] dt {
  color: var(--ink);
  font-size: var(--text-14);
  line-height: 21px;
}

dl[data-kind="lines"] dd {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

dl[data-kind="lines"] dd > code {
  color: var(--ink-soft);
}

dl[data-kind="lines"] > div > dd:last-child {
  justify-self: end;
}

dl[data-kind="lines"] dd > a {
  white-space: nowrap;
}

/* Runs: the filters sit in one row over the table. */

main form[role="search"] {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

main form[role="search"] > p {
  gap: 2px;
  min-width: 0;
}

main form[role="search"] > p:first-child {
  flex: 1 1 260px;
}

main form[role="search"] > p > label {
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-weight: 400;
}

main form[role="search"] > p:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

main form[role="search"] > p > input[type="checkbox"] + label {
  color: var(--ink);
  font-size: var(--text-14);
}

/* A tab's opening line: what it holds, and its action at the end. */
[role="tabpanel"] > div > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

[role="tabpanel"] > div > header > p {
  flex: 1 1 320px;
  color: var(--ink-soft);
}

main form[role="search"] + table + p {
  padding: var(--space-4) 0;
  color: var(--ink-soft);
}

/* Queue: each group says who could take its runs over its table. */

main section[aria-labelledby] > h2 + p {
  margin-bottom: var(--space-3);
  color: var(--ink-soft);
}

/* Transfers: bytes as a short bar beside the words. */

td > span:has(> progress) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

td > span > progress {
  flex: none;
  width: 72px;
  height: 6px;
}

/* Tabs */

[role="tablist"] {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-6);
  overflow-x: auto;
  border-bottom: 1px solid var(--contour);
}

[role="tab"] {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
}

[role="tab"]:hover {
  color: var(--ink);
}

[role="tab"][aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--ink);
  color: var(--ink);
  font-weight: 600;
}

[role="tab"]:focus-visible {
  outline-offset: -2px;
}

[role="tabpanel"] {
  padding-top: var(--space-4);
}

[role="tabpanel"]:focus-visible {
  outline-offset: 4px;
}

/* The design-system specimen */

dl[data-kind="swatches"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

dl[data-kind="swatches"] > div > dd {
  order: -1;
  height: 40px;
  margin-bottom: var(--space-1);
  border: 1px solid var(--contour);
  background: var(--swatch);
}

p[data-size="36"] {
  font-size: var(--text-36);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 40px;
}

p[data-size="28"] {
  font-size: var(--text-28);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 34px;
}

p[data-size="21"] {
  font-size: var(--text-21);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 28px;
}

p[data-size="16"] {
  font-size: var(--text-16);
  line-height: 24px;
}

p[data-size="12"] {
  font-size: var(--text-12);
  font-stretch: var(--condensed);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

p[data-size="11"] {
  font-size: var(--text-11);
  font-stretch: var(--narrow);
  font-weight: 600;
}

main section > div:has(> p[data-size]) {
  display: grid;
  gap: var(--space-2);
}

main section > ul[aria-label] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
  list-style: none;
}

main section > div > figure {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

main section > div > figure > figcaption {
  color: var(--ink-soft);
  font-size: var(--text-12);
}

main section > figure:has(> meter, > progress) + figure {
  margin-top: var(--space-4);
}

main section:has(> section[data-kind="empty"]) {
  display: grid;
  gap: var(--space-4);
}

/* Sections that follow other content on a page start a new block; the
   first one under the page header needs no extra room. */

main * + section[aria-labelledby]:has(> h2) {
  margin-top: var(--space-6);
}

main header:has(> h1) + section[aria-labelledby] {
  margin-top: 0;
}

main section > h3 {
  margin-bottom: var(--space-3);
}

main * + section[aria-labelledby]:has(> h3) {
  margin-top: var(--space-5);
}

main :is(section, div) > p:not([role]) + :is(table, div, form, section) {
  margin-top: var(--space-3);
}

/* A row of actions under a section's words. */
main :is(section, div) > footer:has(> button) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Machine values typed into a field. */
:is(input, textarea)[data-kind="code"] {
  font-family: var(--mono);
  font-size: 13px;
}

textarea {
  resize: vertical;
}

/* A form's own note under its fields, and why it failed. */
form > p:not(:has(> label)):not([role]) {
  margin-top: calc(-1 * var(--space-2));
  color: var(--ink-soft);
  font-size: var(--text-12);
}

form > p[role="alert"],
dialog p[role="alert"] {
  justify-self: stretch;
  max-width: 64ch;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--fault) 6%, var(--sheet));
  box-shadow: inset 3px 0 0 var(--fault);
}

dialog > p + form {
  margin-top: var(--space-4);
}

/* Several things in one table cell sit on a line; a note under them takes
   its own. */
tbody td > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
}

tbody td > span > small {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: var(--text-11);
}

tbody td > span > button {
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--text-12);
}

tbody td > span > a > data[data-state] {
  color: inherit;
}

/* A pin: a filled diamond and its word. */
data[data-kind="pin"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

data[data-kind="pin"]::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 1px;
  background: var(--ink);
  transform: rotate(45deg);
}

/* Artifacts: each result's files under a line naming the run, its state
   and its pin. Every result's table shares the same columns. */

main section[data-kind="result"] {
  margin-top: var(--space-5);
}

main section[data-kind="result"] > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-4);
  margin-bottom: var(--space-2);
}

main section[data-kind="result"] > header > h3 {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}

main section[data-kind="result"] > header > p {
  flex: 1 1 100%;
  max-width: none;
  order: 1;
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

main section[data-kind="result"] > header > button {
  min-height: 28px;
}

main section[data-kind="result"] > table {
  table-layout: fixed;
}

main section[data-kind="result"] > table :is(th, td):nth-child(1) {
  width: 38%;
}

main section[data-kind="result"] > table :is(th, td):nth-child(2) {
  width: 16%;
}

main section[data-kind="result"] > table :is(th, td):nth-child(3) {
  width: 12%;
}

main section[data-kind="result"] > table :is(th, td):nth-child(4) {
  width: 18%;
}

main section[data-kind="result"] > table :is(th, td) {
  overflow-wrap: anywhere;
}

main section[data-kind="result"] > table td > small {
  color: var(--ink-soft);
}

/* A cleanup preview: what would go, set apart in the colour of stored
   data, before it is applied. */
main section[data-kind="cleanup"] {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  max-width: 75ch;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--load);
}

main section[data-kind="cleanup"] > h3 {
  margin: 0;
}

main section[data-kind="cleanup"] > ul {
  padding-left: var(--space-5);
  font-variant-numeric: tabular-nums;
}

main section[data-kind="cleanup"] > p:last-of-type {
  color: var(--ink-soft);
}

main section[data-kind="cleanup"] > footer {
  margin-top: var(--space-1);
}

/* An empty list inside a tab panel ranks under the panel's own
   headings. */
[role="tabpanel"] section[data-kind="empty"] {
  padding: var(--space-3) 0;
}

[role="tabpanel"] section[data-kind="empty"] > h2 {
  font-size: var(--text-16);
  line-height: 24px;
}

/* Settings: tabs open the page under its title. */
main header:has(> h1) + div > [role="tablist"] {
  margin-top: 0;
}

/* A receiver's deliveries, under its own heading and actions. */
main section[data-kind="deliveries"] > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

main section[data-kind="deliveries"] > header > h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

main section[data-kind="deliveries"] > header > h3 > code {
  font-weight: 500;
}

/* Storage: the meters, then where the bytes are. */
main section > figure:has(> meter) {
  margin-top: var(--space-4);
}

main section > figure:has(> meter) + dl {
  margin-top: var(--space-5);
}

@media (max-width: 719px) {
  dl[data-kind="lines"] {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  dl[data-kind="lines"] > div {
    row-gap: 2px;
    column-gap: var(--space-3);
  }

  dl[data-kind="lines"] > div > dd:last-child {
    grid-column: 2;
    justify-self: start;
  }

  h1 {
    font-size: var(--text-28);
    line-height: 34px;
  }

  main section:has(> ol + section) {
    grid-template-columns: minmax(0, 1fr);
  }

  main section:has(> ol + section) > ol {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding: var(--space-2) 0;
    border-right: 0;
    border-bottom: 1px solid var(--contour);
  }

  main section:has(> ol + section) > section {
    padding-left: 0;
  }

  main section > div > figure {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  main section[data-kind="result"] > table :is(th, td):nth-child(n) {
    width: auto;
  }
}

/* The run page's tabs: what became of the artifacts over their table, the
   snapshot over its files, and older runs under the run list. */
p[data-kind="keeping"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
}

p[data-kind="keeping"] > button {
  min-height: 28px;
  margin-left: var(--space-2);
}

[role="tabpanel"] > div > div:has(> dl) {
  margin-bottom: var(--space-3);
}

main section[aria-label="Runs"] footer {
  align-items: center;
  margin-top: var(--space-4);
}

main section[aria-label="Runs"] footer > p {
  color: var(--ink-soft);
}
/* The agent's status page (data-kind="agent"): the agent's name and its
   connection to the server, its facts, a lane per slot and its recent
   attempts. It is read from across a desk, so lanes, names and times are a
   size up from the console's. While the page has lost the agent, what it
   last reported stays, greyed. */

/* The lanes' ink rule closes the header. */
div[data-kind="agent"] > div > header {
  margin-bottom: var(--space-4);
  border-bottom: 0;
}

div[data-kind="agent"] > div > header > h1 + p {
  color: var(--ink);
  font-size: var(--text-16);
  line-height: 24px;
}

div[data-kind="agent"] > div > header > h1 + p > data {
  font-weight: 600;
}

/* A mark's words sit on the line's baseline, its shape centred on them. */
div[data-kind="agent"] data[data-state] {
  align-items: baseline;
}

div[data-kind="agent"] data[data-state]::before {
  align-self: center;
}

div[data-kind="agent"] > div > header > p[data-tone="problem"] {
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--fault) 6%, var(--sheet));
  box-shadow: inset 3px 0 0 var(--fault);
  color: var(--ink);
}

div[data-kind="agent"] > div > div > section[role="alert"] {
  margin-bottom: var(--space-5);
}

div[data-kind="agent"][data-state="stale"] > div > :is(header, section) {
  opacity: 0.6;
  filter: grayscale(1);
}

/* Slots: the name, what it holds (or since when it is idle), the strip and
   the time running on one line, then the attempt's facts, transfers and
   last output under them. */

ol[data-kind="slots"] {
  list-style: none;
  border-top: 1px solid var(--ink);
}

ol[data-kind="slots"] > li {
  display: grid;
  grid-template-columns: 80px minmax(0, 300px) minmax(0, 1fr) 88px;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--contour);
}

ol[data-kind="slots"] > li > h3 {
  grid-column: 1;
  grid-row: 1;
  color: var(--ink-soft);
  font-size: var(--text-16);
  font-weight: 500;
  line-height: 36px;
  white-space: nowrap;
}

ol[data-kind="slots"] > li > h3 + p {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-16);
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ol[data-kind="slots"] > li[data-state="running"] > h3 + p {
  font-size: var(--text-21);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 28px;
}

/* Without an attempt the slot says why across the lane. */
ol[data-kind="slots"] > li:not([data-state="running"]) > h3 + p {
  grid-column: 2 / -1;
  color: var(--ink-soft);
  white-space: normal;
}

ol[data-kind="slots"] > li:not([data-state="running"]) > ol[data-kind="strip"] {
  display: none;
}

ol[data-kind="slots"] > li > ol[data-kind="strip"] {
  grid-column: 3;
  grid-row: 1;
  height: 36px;
}

ol[data-kind="slots"] > li > ol[data-kind="strip"] > li {
  font-size: var(--text-12);
  line-height: 36px;
}

ol[data-kind="slots"] > li > time {
  grid-column: 4;
  grid-row: 1;
  font-size: var(--text-28);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 36px;
  text-align: right;
}

ol[data-kind="slots"] > li > :is(dl, ul, figure, p:last-child) {
  grid-column: 2 / -1;
}

ol[data-kind="slots"] > li > dl {
  gap: var(--space-1) var(--space-6);
}

ol[data-kind="slots"] > li > dl dd {
  font-variant-numeric: tabular-nums;
}

ol[data-kind="slots"] > li > ul {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

ol[data-kind="slots"] > li > ul > li > figure {
  grid-template-columns: max-content minmax(0, 1fr);
  max-width: 640px;
}

ol[data-kind="slots"] > li > ul > li > figure > figcaption {
  font-weight: 500;
}

ol[data-kind="slots"] > li > ul > li > figure > p {
  font-size: var(--text-14);
  text-align: right;
}

ol[data-kind="slots"] > li > figure:not(:has(> progress)) {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

ol[data-kind="slots"] > li > figure > figcaption {
  color: var(--ink-soft);
  font-size: var(--text-12);
}

ol[data-kind="slots"] > li > figure > pre {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--contour);
  background: var(--paper);
  font-size: 13px;
  line-height: 20px;
}

/* Each line keeps to one row; a long one ends in an ellipsis. */
ol[data-kind="slots"] > li > figure > pre > samp > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

ol[data-kind="slots"] > li > p:last-child {
  color: var(--ink-soft);
}

/* Recent attempts, a size up from the console's tables. */

div[data-kind="agent"] section[aria-labelledby] {
  margin-top: var(--space-6);
}

div[data-kind="agent"] section[aria-labelledby] table {
  max-width: 960px;
  font-size: var(--text-14);
  line-height: 21px;
}

div[data-kind="agent"] section[aria-labelledby] tbody :is(th, td) code {
  font-size: 13px;
}

div[data-kind="agent"] section[aria-labelledby] > div > p {
  color: var(--ink-soft);
}

@media (max-width: 719px) {
  ol[data-kind="slots"] > li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
  }

  ol[data-kind="slots"] > li > h3 {
    line-height: 28px;
  }

  ol[data-kind="slots"] > li > h3 + p,
  ol[data-kind="slots"] > li:not([data-state="running"]) > h3 + p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  ol[data-kind="slots"] > li > ol[data-kind="strip"] {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  ol[data-kind="slots"] > li > time {
    grid-column: 2;
  }

  ol[data-kind="slots"] > li > :is(dl, ul, figure, p:last-child) {
    grid-column: 1 / -1;
  }

  ol[data-kind="slots"] > li > dl {
    gap: var(--space-1) var(--space-5);
  }

  ol[data-kind="slots"] > li > ul > li > figure {
    grid-template-columns: minmax(0, 1fr);
  }

  ol[data-kind="slots"] > li > ul > li > figure > p {
    text-align: left;
  }
}