/* ERP integrations: the views' own styles. The stage, its tabs and caption are My builds', Order to cash is drawn as
   their Overview film is, and Monitor sits in their tools' window. Colours, type, space and radius come from the tokens. */

/* Landscape: SAP's areas, as small cells inside its box */
.ld .mod rect { fill: var(--sheet); stroke: var(--sheet-soft); stroke-width: .6; }
.ld .mod text { font-size: var(--sheet-text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }

/* Order to cash: the lanes, SAP's box and the documents in it. The rest of the drawing is the Overview film's */
.of .mf-svg .lane { fill: none; stroke: var(--sheet-soft); stroke-width: 1; stroke-dasharray: 6 6; }
.of .mf-svg .sapb { fill: color-mix(in srgb, var(--sheet-ink) 3%, var(--sheet)); stroke: var(--sheet-ink); stroke-width: 1.3; }
.of .mf-svg .fold { fill: none; stroke: var(--sheet-ink); stroke-width: 1.1; }
.of .mf-svg .dn { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.of .mf-svg .chip.ok rect { fill: color-mix(in srgb, var(--sheet-hl) 12%, var(--sheet)); stroke: var(--sheet-hl); }
.of .mf-svg .chip.ok text { fill: var(--accent-text); }
/* The caption sits on solid sheet, so no box shows through the headline, and it fades in below */
.of .mf-cap { background: var(--sheet); }
.of .mf-cap::after { background: linear-gradient(var(--sheet), transparent); }
/* The clock sits on a band the drawing fades under, as it does under the caption. It holds the width of its longest
   time, so the PO beside it never shifts as the days tick, and it drops to its own line where the two don't fit */
.of .mf-hud {
  inset-block-end: 0;
  inset-inline: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: var(--space-1-5);
  padding: var(--space-fluid-s);
  background: linear-gradient(transparent, var(--sheet) var(--space-fluid-s));
}
.of .mf-hud b { min-inline-size: 19ch; white-space: nowrap; }
/* A phone's frame is one column wide: the labels on the arrows between documents would sit cut at its edge */
@container mf (width < 560px) {
  .of .mf-svg .fl { display: none; }
}

/* Monitor: counts and interfaces, today's messages, and the chosen one's steps */
.sc.mn .ok { --c: var(--tool-ok); }
.sc.mn .wait { --c: var(--tool-bot); }
.sc.mn .ko { --c: var(--tool-ko); }
.sc.mn .sc-main { grid-template-columns: 196px minmax(0, 1fr) 300px; }
.mn-side, .mn-det {
  min-inline-size: 0;
  overflow-y: auto;
  padding-block: var(--space-3);
  padding-inline: var(--space-3-5);
  background: var(--tool-panel);
}
.mn-side { border-inline-end: 1px solid var(--tool-line); }
.mn-det { display: grid; align-content: start; gap: var(--space-3); border-inline-start: 1px solid var(--tool-line); }
.mn-det .sc-h { margin: 0; }
.mn-det:focus { outline: none; }
.mn-stats, .mn-steps, .mn-rows { margin: 0; padding: 0; list-style: none; }
.mn-stats { display: grid; margin-block-end: var(--space-5); }
.mn-stats li { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-1-5); font-size: var(--text-xs); }
.mn-stats i { inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--r-round); background: var(--c); }
.mn-stats b, .mn-ifs b { margin-inline-start: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mn-stats b { font-weight: var(--weight-semibold); }
.mn-ifs { display: grid; gap: var(--space-0-5); }
.mn-ifs button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding-block: var(--space-1-5);
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--tool-muted);
  font: inherit;
  font-size: var(--text-xs);
  text-align: start;
  cursor: pointer;
}
.mn-ifs button span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-ifs b { font-size: var(--text-2xs); font-weight: var(--weight-medium); }
.mn-ifs button:hover { background: var(--tool-hover); color: var(--tool-text); }
.mn-ifs button[aria-pressed="true"] { background: var(--tool-raise); color: var(--tool-text); }
.mn-list { display: grid; grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; min-block-size: 0; }
.mn-head, .mn-rows button {
  display: grid;
  grid-template-columns: 108px 60px minmax(0, 1fr) minmax(0, 132px);
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-3-5);
}
.mn-head {
  padding-block: var(--space-2-5);
  border-block-end: 1px solid var(--tool-line);
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mn-head span:last-child, .mn-refc { text-align: end; }
.mn-rows { overflow-y: auto; }
.mn-rows button {
  position: relative;
  inline-size: 100%;
  min-block-size: 34px;
  padding-block: var(--space-1-5);
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--tool-line) 60%, transparent);
  background: none;
  color: var(--tool-text);
  font: inherit;
  font-size: var(--text-xs);
  text-align: start;
  cursor: pointer;
}
.mn-rows button:hover { background: var(--tool-hover); }
.mn-rows button[aria-pressed="true"] { background: var(--tool-raise); }
.mn-rows button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--space-0-5);
  background: var(--tool-top);
}
.mn-rows button:focus-visible, .mn-ifs button:focus-visible { outline: 2px solid var(--tool-top); outline-offset: calc(-1 * var(--space-0-5)); }
.mn-acts .sc-run:focus-visible { outline: 2px solid var(--tool-top); outline-offset: 2px; }
.mn-time, .mn-refc { color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.mn-ifn, .mn-refc { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-ifn small { margin-inline-start: var(--space-2); color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-2xs); }
/* A row shows its format beside the interface only where both fit, so the name reads whole; the chosen message keeps its route */
.mn-ifn { container: mn-ifn / inline-size; }
@container mn-ifn (width < 200px) {
  .mn-ifn small { display: none; }
}
.mn-st {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-1-5);
  padding-block: var(--space-0-5);
  padding-inline: var(--space-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.mn-st::before { content: ""; inline-size: var(--space-1-5); block-size: var(--space-1-5); border-radius: var(--r-round); background: currentColor; }
/* The chosen message: what it is, its route, and each step it took */
.mn-dh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-2); }
.mn-if {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mn-ref { margin: 0; font-family: var(--mono); font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.mn-route { margin: 0; color: var(--tool-muted); font-size: var(--text-xs); }
.mn-steps { display: grid; }
.mn-steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-4) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-1) var(--space-2-5);
  padding-block-end: var(--space-3);
  font-size: var(--text-xs);
}
.mn-steps li:last-child { padding-block-end: 0; }
/* The line from one step to the next */
.mn-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--space-4) + var(--space-0-5)) var(--space-0-5);
  inset-inline-start: calc(var(--space-2) - var(--space-0-5) / 4);
  border-inline-start: 1px solid var(--tool-line);
}
.mn-steps svg {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  fill: none;
  stroke: var(--c);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mn-steps li.wait svg circle { stroke-dasharray: 3 2.4; transform-origin: center; animation: mn-spin var(--dur-long) linear infinite; }
@keyframes mn-spin { to { rotate: 1turn; } }
.mn-steps time { color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; line-height: var(--space-4); }
.mn-steps li > span { line-height: var(--space-4); }
.mn-why, .mn-done {
  margin: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-2-5);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.mn-why { --c: var(--tool-ko); grid-column: 2 / -1; margin-block-start: var(--space-1); }
.mn-done { --c: var(--tool-ok); }
.mn-why b { font-family: var(--mono); font-weight: var(--weight-semibold); }
.mn-acts { display: grid; gap: var(--space-2); }
.mn-acts .sc-run { inline-size: 100%; min-block-size: var(--tap); }
.mn-sum { color: var(--tool-text); }
.mn-bad .sc-drc i { background: var(--tool-ko); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-ko) 22%, transparent); }
.mn-bad .sc-drc b { color: var(--tool-text); }
/* Narrower: the list and the chosen message share the width, as tall as they need so the message's actions stay in sight.
   The counts stay in the status line, and the times in the chosen message */
.sc.mn.mid { aspect-ratio: auto; }
.sc.mn.mid .sc-main { grid-template-columns: minmax(0, 1fr) 280px; }
.sc.mn.mid .mn-side, .sc.mn.mid .mn-time, .sc.mn.mid .mn-head span:nth-child(2) { display: none; }
.sc.mn.mid :is(.mn-head, .mn-rows button) { grid-template-columns: 108px minmax(0, 1fr) minmax(0, 132px); }
/* A phone: the counts in a row, the latest messages in two lines each, and the chosen one under them */
.sc.mn.compact .sc-main { grid-template-columns: minmax(0, 1fr); }
.sc.mn.compact .mn-side { padding: var(--space-2-5); border: 0; border-block-end: 1px solid var(--tool-line); }
.sc.mn.compact .mn-side .sc-h, .sc.mn.compact .mn-ifs, .sc.mn.compact .mn-head, .sc.mn.compact .mn-ifn small, .sc.mn.compact .mn-upd, .sc.mn.compact .mn-sum { display: none; }
.sc.mn.compact .mn-stats { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0; }
.sc.mn.compact .mn-stats li { gap: var(--space-1-5); padding-block: var(--space-1); padding-inline: var(--space-2); border: 1px solid var(--tool-line); border-radius: var(--r-pill); }
.sc.mn.compact .mn-rows li:nth-child(n + 8) { display: none; }
.sc.mn.compact .mn-rows button { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ifn st" "time ref"; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); }
.sc.mn.compact .mn-rows .mn-st { grid-area: st; justify-self: end; }
.sc.mn.compact .mn-time { grid-area: time; }
.sc.mn.compact .mn-ifn { grid-area: ifn; }
.sc.mn.compact .mn-refc { grid-area: ref; }
.sc.mn.compact .mn-det { border: 0; border-block-start: 1px solid var(--tool-line); }

@media (prefers-reduced-motion: reduce) {
  .mn-steps li.wait svg circle { animation: none; }
}