/* Programs, How I run a program, Moving a company: two decks on the sheet, the new platform over the old ERPs with the
   middleware between them, the program's months on a rail under them, and a tally in the caption. Old is grey,
   temporary bridges orange and dashed, the new platform teal. Colours, type, space and radius come from the tokens; the
   drawing's numbers are the stage's pixels. */

.mv { --mv-soft: color-mix(in srgb, var(--sheet-ink) 64%, var(--sheet)); --mv-ink2: color-mix(in srgb, var(--sheet-ink) 72%, var(--sheet)); }
/* The stage keeps the drawing a floor of room under the caption, however many lines the caption takes */
.mv .cx-stage { aspect-ratio: 16 / 9; min-block-size: calc(var(--mv-cap, 0px) + 300px); }
@container cx (560px <= width < 900px) {
  .mv .cx-stage { aspect-ratio: 5 / 4; }
}
/* Tall, the drawing's room is the same at any width: seven rows of the company, the rail and its margins */
@container cx (width < 560px) {
  .mv .cx-stage { aspect-ratio: auto; block-size: calc(var(--mv-cap, 0px) + 560px); }
  /* Room for the longest reason, so nothing moves when a reason says more */
  .mv .cx-d { min-block-size: calc(3 * var(--leading-snug) * var(--text-sm)); }
}
@container cx (width < 330px) {
  .mv .cx-d { min-block-size: calc(4 * var(--leading-snug) * var(--text-sm)); }
}

/* The drawing's room, under the caption however tall it is, and the rail under it */
.mv .cx-world {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--mv-cap, 0px) var(--space-fluid-m) var(--space-fluid-s);
}
.mv-draw { position: relative; min-block-size: 0; }
.mv-draw > svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }

/* The tally: what keeps running while the company moves */
.mv-tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-0-5) 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}
.mv-tally div { display: flex; align-items: baseline; gap: var(--space-1-5); }
.mv-tally dt { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.mv-tally dd { order: -1; margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
/* The bridges' count wears the bridges' dash, the key to them on the drawing */
.mv-tb dt::after { content: ''; inline-size: var(--space-5); border-block-start: 2px dashed var(--sheet-bridge); }

/* Words on the drawing: names in ink, state lines and the decks' names in grey. Words outside a box wear a halo of the
   sheet, so a line behind them never cuts them */
.mv svg text { font-size: var(--sheet-text-lg); }
.mv svg .mv-nm { font-weight: var(--weight-semibold); }
.mv svg :is(.mv-s, .mv-hd) { fill: var(--mv-soft); font-size: var(--sheet-text-sm); }
.mv svg .mv-hd { font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); }
.mv svg :is(.mv-res, .mv-off) { fill: var(--mv-soft); }
.mv svg .mv-out { paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; }
@container cx (width < 560px) {
  .mv svg text { font-size: var(--sheet-text-md); }
  .mv svg :is(.mv-s, .mv-hd) { font-size: var(--sheet-text-sm); }
  .mv svg .mv-hd { letter-spacing: var(--tracking-wide); }
}

/* The middleware's band and its tracks */
.mv-band { fill: none; stroke: var(--sheet-faint); stroke-dasharray: 2 3; }
.mv-trk { fill: none; stroke: var(--sheet-faint); stroke-dasharray: 1 5; }

/* The new platform: homes dashed until they go live, slots dashed until a stream moves in */
.mv-home { fill: none; stroke: var(--sheet-soft); stroke-width: 1.2; stroke-dasharray: 5 3; }
.mv-home.on { fill: color-mix(in srgb, var(--sheet-hl) 5%, transparent); stroke: var(--sheet-cu); stroke-dasharray: none; }
.mv-slot { fill: none; stroke: var(--sheet-faint); stroke-dasharray: 3 3; }
.mv-slot.on { fill: color-mix(in srgb, var(--sheet-hl) 14%, var(--sheet)); stroke: var(--sheet-hl); stroke-dasharray: none; }

/* The old ERPs' streams: running, a socket fed from the new platform, or gone; and the rows kept for audit */
.mv-blk { fill: color-mix(in srgb, var(--sheet-ink) 6%, var(--sheet)); stroke: var(--sheet-soft); }
.mv-gh { stroke: var(--sheet-ink); }
.mv-sock { fill: var(--sheet); stroke: var(--sheet-soft); stroke-dasharray: 3 2; }
.mv-gone { fill: none; stroke: var(--sheet-faint); stroke-dasharray: 1 3; }
.mv-ro { stroke: var(--sheet-faint); }
.mv-htl { stroke: var(--sheet-faint); stroke-width: 1.5; }

/* The links: the old ERPs' own in grey, temporary bridges orange and dashed, the new platform's teal. Each sits on a
   halo of the sheet, so where two cross, one passes over the other */
.mv-l { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mv-l.old { stroke: var(--sheet-soft); }
.mv-l.bridge { stroke: var(--sheet-bridge); stroke-dasharray: 5 3; }
.mv-l.new { stroke: var(--sheet-cu); }
.mv-halo { fill: none; stroke: var(--sheet); stroke-width: 5; stroke-linejoin: round; }
.mv-pin.old { fill: var(--sheet-soft); }
.mv-pin.bridge { fill: var(--sheet-bridge); }
.mv-pin.new { fill: var(--sheet-hl); }

/* The documents: filled one way, hollow the other */
.mv-d.old { fill: var(--mv-ink2); }
.mv-d.bridge { fill: var(--sheet-bridge); }
.mv-d.new { fill: var(--sheet-hl); }
.mv-d.back { fill: var(--sheet); stroke-width: 1.4; }
.mv-d.back.old { stroke: var(--mv-ink2); }
.mv-d.back.bridge { stroke: var(--sheet-bridge); }
.mv-d.back.new { stroke: var(--sheet-hl); }

/* The rail: the program's months, its quarter-end closes ticked, its points to choose, and how far the film has come */
.mv-rail { --mv-dot: var(--space-3); position: relative; block-size: var(--tap); }
.mv-ax {
  position: absolute;
  /* Centred on the points' dots */
  inset-block-start: calc(var(--mv-dot) / 2);
  translate: 0 -50%;
  inset-inline: var(--mv-pad, 0px);
  block-size: 2px;
  background: var(--sheet-faint);
}
.mv-ax::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--mv-run, 0) * 100%); background: var(--sheet-hl); }
.mv-q {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-1));
  inset-inline-start: calc(var(--at) * 100%);
  inline-size: 1px;
  block-size: calc(var(--space-2) + 2px);
  background: var(--sheet-soft);
}
.mv-rail ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mv-rail li { position: absolute; inset-block-start: 0; inset-inline-start: var(--x); inline-size: var(--w); margin-inline-start: calc(var(--w) / -2); }
.mv-rail button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-0-5);
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--mv-soft);
  font: inherit;
  cursor: pointer;
}
.mv-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-0-5); }
.mv-rail button:hover, .mv-rail button[aria-pressed="true"] { color: var(--sheet-ink); }
.mv-dot {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  inline-size: var(--mv-dot);
  block-size: var(--mv-dot);
  border: 2px solid var(--sheet-faint);
  border-radius: var(--r-round);
  background: var(--sheet);
}
.mv-rail [data-on] .mv-dot { border-color: var(--sheet-hl); background: var(--sheet-hl); }
.mv-rail [aria-pressed="true"] .mv-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sheet-hl) 28%, transparent); }
.mv-m, .mv-n { white-space: nowrap; font-size: var(--text-2xs); line-height: var(--leading-snug); }
.mv-m { font-family: var(--mono); font-weight: var(--weight-medium); }
.mv-rail [aria-pressed="true"] :is(.mv-m, .mv-n) { font-weight: var(--weight-semibold); }
@container cx (width < 560px) {
  .mv-n { display: none; }
}