/* ERP integrations, One message: one message at a time on the sheet, in six kinds a picker chooses between. The places
   it passes sit on a rail across the top, as many columns as it has, the message gliding along it as a chip that shows
   the value that goes wrong; under them, the message as it is at each, in mono. Where the stage is narrow, the rail runs
   down the start side and the message sits beside it. That value is marked the whole way; colour comes only with how
   each place ends. Colours, type, space and radius come from the tokens. */

.om { --om-soft: color-mix(in srgb, var(--sheet-ink) 64%, var(--sheet)); --om-mark: color-mix(in srgb, var(--sheet-hl) 22%, var(--sheet)); }

/* The picker: the six messages on a row of their own, over the switch and replay */
.om-pick { flex: 1 0 100%; }

/* The drawing's room: under the caption, however tall it is, down to the sheet's foot */
.om .cx-world {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--om-cap) var(--space-fluid-m) var(--space-fluid-s);
}

/* The rail, its places, and how far along it the message has come; it runs from the first dot's centre to the last's,
   under everything on it, so a message going back along it passes over the places on its way */
.om-track {
  --om-dot: var(--space-5);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--om-n, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.om-track::before, .om-track::after {
  content: '';
  position: absolute;
  z-index: -1;
  /* Centred on the dots */
  inset-block-start: calc(var(--om-dot) / 2);
  translate: 0 -50%;
  inset-inline-start: calc(50% / var(--om-n, 5));
  inline-size: calc(100% - 100% / var(--om-n, 5));
  block-size: 2px;
  background: var(--sheet-faint);
}
.om-track::after { inline-size: calc((100% - 100% / var(--om-n, 5)) * var(--om-run, 0)); background: var(--sheet-hl); }
.om-track li { display: grid; }
.om-track button {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-1);
  min-block-size: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--om-soft);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.om-track button:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-0-5); }
.om-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--om-dot);
  block-size: var(--om-dot);
  border: 2px solid var(--sheet-faint);
  border-radius: var(--r-round);
  background: var(--sheet);
}
.om-sn { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-snug); text-wrap: balance; }
.om-ss { color: var(--om-soft); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.om-track button:hover, .om-track [data-st="on"] { color: var(--sheet-ink); }
.om-track [aria-pressed="true"] .om-sn { font-weight: var(--weight-semibold); }

/* How each place ended: passed, held up, waiting, failed or done */
.om-track [data-st="on"] .om-dot { border-color: var(--sheet-hl); background: var(--sheet-hl); }
.om-track button:is([data-st="warn"], [data-st="wait"]) { color: var(--chip-warn); }
.om-track [data-st="warn"] .om-dot { border-color: var(--rag-a); background: var(--rag-a); }
.om-track [data-st="wait"] .om-dot { border-color: var(--rag-a); }
.om-track button[data-st="bad"] { color: var(--bad-text); }
.om-track [data-st="bad"] .om-dot { border-color: var(--rag-r); background: var(--rag-r); }
.om-track button[data-st="done"] { color: var(--chip-ok); }
.om-track [data-st="done"] .om-dot { border-color: var(--rag-g); background: var(--rag-g); }
/* Waiting, for a job or a buyer: a ring round the place fills like a clock */
.om-track [data-st="wait"] .om-dot::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-2));
  border-radius: var(--r-round);
  background: conic-gradient(var(--rag-a) calc(var(--om-wait, 1) * 1turn), var(--sheet-faint) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--sheet-ink) calc(100% - 2px));
}

/* The message on the rail: a chip with the value that goes wrong, marked as it is in the message, over the dot of the
   place it is at. An answer going back is a chip of its own, laid over the rail so it never moves the message's */
.om-tok {
  position: relative;
  z-index: 1;
  flex: none;
  padding: var(--space-0-5) var(--space-1-5);
  border: 1px solid var(--sheet-hl);
  border-radius: var(--r-xs);
  background: var(--om-mark);
  color: var(--sheet-ink);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.om-tok:is([data-st="warn"], [data-st="wait"]) { border-color: var(--rag-a); background: color-mix(in srgb, var(--rag-a) var(--rag-tint), var(--sheet)); color: var(--chip-warn); }
.om-tok[data-st="bad"] { border-color: var(--rag-r); background: color-mix(in srgb, var(--rag-r) var(--rag-tint), var(--sheet)); color: var(--bad-text); }
.om-tok[data-st="done"] { border-color: var(--rag-g); background: color-mix(in srgb, var(--rag-g) var(--rag-tint), var(--sheet)); color: var(--chip-ok); }
.om-reply { position: absolute; background: var(--sheet); color: var(--accent-text); }

/* The message: mono on the sheet, wrapping or scrolling inside its box, never the page */
.om-pay {
  position: relative;
  min-block-size: 0;
  overflow: auto;
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--sheet-faint);
  border-radius: var(--r-md);
  color: var(--sheet-ink);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}
/* An IDoc segment or a status: its name or code in a column of its own; a long segment name over its fields */
.om-seg, .om-sts { display: grid; grid-template-columns: var(--om-lead) minmax(0, 1fr); }
.om-seg { --om-lead: 9ch; }
.om-sts { --om-lead: 4ch; }
.om-segl { --om-lead: 2ch; }
.om-segl > .om-s { grid-column: 1 / -1; }
.om-segl > :last-child { grid-column: 2; }
/* A setting or a log line: its name or time in a column as wide as this message's longest */
.om-kv { display: grid; grid-template-columns: var(--om-kv, 10ch) minmax(0, 1fr); column-gap: var(--space-2); }
/* XML and JSON, a step in a level, about two characters; a line that wraps goes on a step further in */
.om-nest { padding-inline-start: calc((var(--d, 0) + 1) * var(--space-3-5)); text-indent: calc(-1 * var(--space-3-5)); }
.om-s { font-weight: var(--weight-semibold); }
.om-d, .om-f, .om-enc { color: var(--om-soft); }
.om-fv { white-space: nowrap; }
/* The marked value, and any value on its way, as a block of its own, so a copy of it lies exactly over it */
.om-k, .om-u { display: inline-block; text-indent: 0; }
.om-u { border-radius: var(--r-xs); background: var(--om-mark); outline: 2px solid var(--om-mark); }
.om-u.om-bad { background: color-mix(in srgb, var(--rag-r) var(--rag-tint), var(--sheet)); outline-color: color-mix(in srgb, var(--rag-r) var(--rag-tint), var(--sheet)); color: var(--bad-text); }
.om-u.om-warn { background: color-mix(in srgb, var(--rag-a) var(--rag-tint), var(--sheet)); outline-color: color-mix(in srgb, var(--rag-a) var(--rag-tint), var(--sheet)); }
.om-u.om-ok { background: color-mix(in srgb, var(--rag-g) var(--rag-tint), var(--sheet)); outline-color: color-mix(in srgb, var(--rag-g) var(--rag-tint), var(--sheet)); }
.om-ok { color: var(--chip-ok); }
.om-warn { color: var(--chip-warn); }
.om-bad { color: var(--bad-text); }
.om-back { color: var(--accent-text); }
/* Statuses, coloured by how they end: on the way, held, failed or through */
.om-sc { place-self: start; padding-inline: var(--space-1); border-radius: var(--r-xs); background: var(--sheet-faint); font-weight: var(--weight-semibold); }
.om-sc[data-t="warn"] { background: color-mix(in srgb, var(--rag-a) var(--rag-tint), var(--sheet)); color: var(--chip-warn); }
.om-sc[data-t="bad"] { background: color-mix(in srgb, var(--rag-r) var(--rag-tint), var(--sheet)); color: var(--bad-text); }
.om-sc[data-t="ok"] { background: color-mix(in srgb, var(--rag-g) var(--rag-tint), var(--sheet)); color: var(--chip-ok); }

/* Copies that move over the message: lines on their way out, values on their way to a new place */
.om-fx { position: absolute; inset: 0; pointer-events: none; }
.om-fx > * { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
.om-fx > span { white-space: pre; }

@container cx (width >= 900px) {
  .om-pay { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-body); }
}
@container cx (width >= 1100px) {
  .om-pay { font-size: var(--text-lg); }
}
@container cx (width < 900px) {
  .om-ss { display: none; }
}
/* Narrow: the picker wraps onto rows of its own; the rail runs down the start side, each place's name under its dot,
   the message beside it */
@container cx (width < 560px) {
  .om-pick .cx-seg { border-radius: var(--r-lg); }
  .om .cx-d { min-block-size: calc(3 * var(--leading-snug) * var(--text-sm)); }
  .om .cx-world { grid-template: minmax(0, 1fr) / auto minmax(0, 1fr); }
  .om-track { grid-template: repeat(var(--om-n, 5), minmax(0, 1fr)) / auto; }
  .om-track::before, .om-track::after { inset-block-start: calc(50% / var(--om-n, 5)); inset-inline: 0; margin-inline: auto; inline-size: 2px; block-size: calc(100% - 100% / var(--om-n, 5)); translate: none; }
  .om-track::after { block-size: calc((100% - 100% / var(--om-n, 5)) * var(--om-run, 0)); }
  .om-track button { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); align-content: stretch; }
  .om-dot { grid-row: 2; }
  /* A name breaks between its words, so the rail's column is only as wide as its longest word, or seven letters */
  .om-sn { grid-row: 3; align-self: start; inline-size: min-content; min-inline-size: calc(7ch + 2 * var(--space-0-5)); padding-inline: var(--space-0-5); background: var(--sheet); }
  .om-pay { padding: var(--space-2); }
}