/* My builds, Overview: the logger system as a 26-second film, with its controls under it. Colours, type, space and radius
   come from the tokens; the drawing's numbers are world units. */

/* The controls' room. While a film is the chosen tab, My builds' Overview or ERP's Order to cash, the stage keeps it free
   under itself until the film is built, and with JavaScript off, so nothing moves when the film comes in */
.stage { --mf-ctl: calc(var(--space-3) + var(--space-5) + var(--space-1) + var(--tap)); }
.tb:has([role="tab"][aria-selected="true"]:is([data-look="film"], [data-look="erpFilm"])) .stage:not(:has(.layer)) { margin-block-end: var(--mf-ctl); }

.mf { margin: 0; container: mf / inline-size; }
.mf-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sheet);
}
@container mf (width < 560px) {
  .mf-stage { aspect-ratio: 400 / 620; }
}
.mf-world, .mf-svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }

/* Captions: one beat at a time, over the drawing's top */
.mf-cap {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: grid;
  padding: var(--space-fluid-m);
  background: linear-gradient(var(--sheet) 55%, color-mix(in srgb, var(--sheet) 85%, transparent));
  pointer-events: none;
}
/* The drawing fades under the caption instead of running into it */
.mf-cap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--space-fluid-l);
  background: linear-gradient(color-mix(in srgb, var(--sheet) 85%, transparent), transparent);
}
.mf-c { grid-area: 1 / 1; }
.mf-c:not(:last-child) { visibility: hidden; }
.mf-e {
  margin: 0;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mf-h {
  margin-block: var(--space-2) 0;
  margin-inline: 0;
  max-inline-size: 40ch;
  color: var(--text);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* The clock, as on a broadcast */
.mf-hud {
  position: absolute;
  inset-block-end: var(--space-fluid-s);
  inset-inline-end: var(--space-fluid-s);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  pointer-events: none;
}
.mf-hud i { inline-size: var(--space-1-5); block-size: var(--space-1-5); border-radius: var(--r-round); background: var(--accent); }
.mf-hud b { min-inline-size: 8ch; color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; text-align: end; }

/* Controls: play, the scrubber with its beats, the time. They fill their room exactly, and keep it unseen while GSAP starts */
.mf-ctl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  block-size: var(--mf-ctl);
  padding-block-start: var(--space-3);
}
.mf:not(.live) .mf-ctl { visibility: hidden; }
.mf-btn {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift);
  cursor: pointer;
}
.mf-btn svg { display: none; inline-size: var(--space-4); block-size: var(--space-4); fill: currentColor; }
.mf-btn[data-s="play"] .i-play, .mf-btn[data-s="pause"] .i-pause, .mf-btn[data-s="replay"] .i-replay { display: block; }
.mf-track { display: grid; min-inline-size: 0; padding-block-start: var(--space-5); }
.mf-bar { position: relative; block-size: var(--space-1); border-radius: var(--r-pill); background: var(--line); cursor: pointer; touch-action: none; }
.mf-bar::before { content: ""; position: absolute; inset-block: calc(-1 * var(--space-3)); inset-inline: 0; }
.mf-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; border-radius: inherit; background: var(--accent); }
/* --cols is each beat's share of the track, set by the film */
.mf-beats { --cols: repeat(5, 1fr); display: grid; grid-template-columns: var(--cols); margin: 0; padding: 0; list-style: none; }
.mf-beats li { min-inline-size: 0; }
.mf-beats button {
  display: block;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding-block: 0;
  padding-inline: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.mf-beats button:hover, .mf-beats button.on { color: var(--text); }
.mf-beats .n { display: none; }
@container mf (width < 560px) {
  .mf-beats .l { display: none; }
  .mf-beats .n { display: inline; }
}
.mf-time { padding-block-start: var(--space-3); color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* The drawing */
.mf-svg { font-family: var(--mono); }
.mf-svg text { fill: var(--sheet-ink); font-size: var(--text-xs); font-weight: var(--weight-medium); text-anchor: middle; }
.mf-svg .st { text-anchor: start; }
.mf-svg .en { text-anchor: end; }
.mf-svg .t { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }
.mf-svg .s, .mf-svg .e, .mf-svg .wl { fill: var(--sheet-soft); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); }
.mf-svg .wl { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.mf-svg .e.bad { fill: var(--bad-text); font-weight: var(--weight-semibold); }
.mf-svg .grid { fill: none; stroke: var(--sheet-faint); stroke-width: .7; }

.mf-svg .nb, .mf-svg .card, .mf-svg .scr { fill: var(--sheet); stroke: var(--sheet-ink); stroke-width: 1.3; }
.mf-svg .nb2 { fill: none; stroke: var(--sheet-ink); stroke-width: 1.3; }
.mf-svg .flash { fill: color-mix(in srgb, var(--sheet-hl) 16%, transparent); stroke: var(--sheet-hl); stroke-width: 1.6; opacity: 0; }
.mf-svg .zone { fill: none; stroke: var(--sheet-soft); stroke-width: 1.1; stroke-dasharray: 8 5; }
.mf-svg .wire { fill: none; stroke: var(--sheet-ink); stroke-width: 1.2; }
.mf-svg .wire.dash { stroke-dasharray: 6 6; }
.mf-svg .ah { fill: var(--sheet-ink); }
.mf-svg .lead { fill: none; stroke: var(--sheet-soft); stroke-width: 1; stroke-dasharray: 2 4; }

/* The logger, in its paper colourway, and the hub */
.mf-svg .shell { fill: var(--cmf-paper); stroke: var(--slate); stroke-width: 1.3; }
.mf-svg .det { fill: none; stroke: var(--slate); stroke-width: 1.1; }
.mf-svg .led { fill: var(--sheet-hl); opacity: 0; }
.mf-svg .arc { fill: none; stroke: var(--sheet-hl); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.mf-svg .hubb, .mf-svg .ant { fill: var(--cmf-graphite); stroke: var(--sheet-ink); stroke-width: 1.3; }
.mf-svg .cord { fill: none; stroke: var(--sheet-ink); stroke-width: 3; stroke-linecap: round; }
.mf-svg .hled { fill: var(--sheet-hl); }

/* The reading */
.mf-svg .big { font-size: calc(var(--text-xl) + var(--text-xl)); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.mf-svg .big .u { fill: var(--sheet-soft); font-size: var(--text-xl); }
.mf-svg .rd .num { transition: fill var(--dur-fast) var(--ease); }
.mf-svg .rd.bad .num { fill: var(--bad-text); }
.mf-svg .chip rect { fill: color-mix(in srgb, var(--bad-text) 10%, var(--sheet)); stroke: var(--bad-text); stroke-width: 1; }
.mf-svg .chip text { fill: var(--bad-text); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); }

/* Cloud, chart and the countdown */
.mf-svg .row { fill: var(--sheet-hl); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); opacity: 0; }
.mf-svg .band { fill: color-mix(in srgb, var(--sheet-hl) 10%, transparent); }
.mf-svg .edge { fill: none; stroke: var(--sheet-hl); stroke-width: 1; stroke-dasharray: 4 4; }
.mf-svg .cl { fill: none; stroke: var(--sheet-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mf-svg .cl.bad { stroke: var(--bad-text); }
.mf-svg .cdot { fill: var(--bad-text); stroke: var(--sheet); stroke-width: 2; }
.mf-svg .ring0 { fill: none; stroke: var(--sheet-faint); stroke-width: 4; }
.mf-svg .ring { fill: none; stroke: var(--sheet-hl); stroke-width: 4; stroke-linecap: round; }
.mf-svg .ringt { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* The phone and the text that lands on it */
.mf-svg .ph { fill: var(--sheet-ink); stroke: var(--sheet-ink); stroke-width: 1.3; }
.mf-svg .isl { fill: var(--sheet-ink); }
.mf-svg .det2 { fill: none; stroke: var(--sheet-faint); stroke-width: 1; }
.mf-svg .pt { font-family: var(--sans); font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.mf-svg .bub { fill: color-mix(in srgb, var(--sheet-ink) 9%, var(--sheet)); }
.mf-svg .mor { fill: var(--sheet-ink); opacity: 0; }
.mf-svg .bl { font-family: var(--sans); font-size: var(--text-2xs); font-weight: var(--weight-medium); }

/* What moves: reports, pulses and the trail */
.mf-svg .pkt { opacity: 0; }
/* A paper edge keeps a message apart from the dark hub it leaves */
.mf-svg .pkt rect { fill: var(--sheet-ink); paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; }
.mf-svg .pkt text { fill: var(--sheet); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }
.mf-svg .pulse { fill: var(--sheet-hl); opacity: 0; }
.mf-svg .trail {
  fill: none;
  stroke: var(--sheet-hl);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--sheet-hl));
}