/* Ekalix - the MongoDB replica set and its engine room.   web\mongoview.css
 *
 * Every class here starts with mgv- so nothing can collide with styles.css or another module.
 * Every colour is one of the product's own custom properties, so all five themes work without a
 * line of their own: surfaces and text from the theme, severities through the .t-* tone classes
 * (--tone, --tone-bg, --tone-bd) that styles.css defines.
 *
 * Motion lives only under .mgv-anim, which mongoview.js sets when motion is allowed and the tab
 * is visible, and the script does not render the particles, the pulses or the heartbeat at all
 * otherwise. The rules at the end switch everything off again for data-motion="off" and for
 * prefers-reduced-motion unless data-motion="on" - belt and braces. The still picture reads on
 * its own: lines, colours, glyphs and numbers carry the meaning, the motion only emphasises it.
 *
 * The SVG type is sized from --fs-small and --fs-micro, and mongoview.js reads --fs-small to lay
 * its labels out, so Clarity's larger type reaches the picture without a label ever colliding.
 */

/* ---------- the replica set: the panel ------------------------------------------------------ */

.mgv {
  position: relative;
  min-width: 0;
  padding: 14px 18px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font);
}
/* The haze behind the picture takes the set's tone: red when something is down, a faint green
   when all is well. Quiet by design - the members should draw the eye, not the background. */
.mgv::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px 240px at 50% 52%, var(--tone-bg), transparent 72%);
  opacity: .85;
}
.mgv.t-ok::before, .mgv.t-muted::before, .mgv.t-info::before { opacity: .4; }
.mgv > * { position: relative; }
.mgv.is-compact { padding: 10px 12px 10px; }

.mgv-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}
.mgv-titles { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; }
.mgv-kicker {
  flex: 0 0 auto;
  font: 700 var(--fs-micro)/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.mgv-setname {
  min-width: 0;
  font: 700 15px/1.15 var(--mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv.is-compact .mgv-setname { font-size: 13.5px; }
.mgv-term {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--text-3);
  white-space: nowrap;
}
.mgv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mgv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
}
.mgv-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mgv-chip i { flex: 0 0 auto; font-style: normal; color: var(--tone); font-weight: 800; }
.mgv.is-compact .mgv-chip { min-height: 21px; padding: 1px 8px; font-size: var(--fs-micro); }

/* ---------- the stage ---------------------------------------------------------------------------- */

.mgv-stage { margin-top: 10px; min-width: 0; }
.mgv.is-compact .mgv-stage { margin-top: 6px; }
.mgv-map { position: relative; max-width: 100%; min-width: 0; }
.mgv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mgv-svg text { font-family: var(--font); }

/* ---------- lines --------------------------------------------------------------------------------- */

.mgv-links, .mgv-parts, .mgv-blocks, .mgv-beats, .mgv-nodes, .mgv-labels { pointer-events: none; }
.mgv-link-base {
  fill: none;
  stroke: var(--tone);
  stroke-opacity: .55;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-opacity var(--t);
}
.mgv.is-compact .mgv-link-base { stroke-width: 1.6; }
.mgv-link.t-muted .mgv-link-base { stroke: var(--text-3); stroke-opacity: .45; }
.mgv-link.is-vote .mgv-link-base { stroke: var(--text-3); stroke-opacity: .6; stroke-width: 1.2; stroke-dasharray: 1.5 4; }
.mgv-link.is-idle .mgv-link-base { stroke: var(--muted); stroke-opacity: .5; stroke-width: 1.4; stroke-dasharray: 4 5; }
.mgv-link.is-broken .mgv-link-base { stroke: var(--critical); stroke-opacity: .85; stroke-width: 1.8; }
.mgv-svg.has-hot .mgv-link.is-hot .mgv-link-base { stroke-opacity: .95; }
.mgv-xmark circle { fill: var(--surface-1); stroke: var(--critical); stroke-width: 1.4; }
.mgv-xmark path { fill: none; stroke: var(--critical); stroke-width: 1.6; stroke-linecap: round; }

/* particles: invisible unless the animation is really running, because a still dot reads as
   traffic too (the trap agview.js documents for its packets) */
.mgv-p {
  fill: none;
  stroke: var(--tone);
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--tone-bd));
}
.mgv-pl.t-muted .mgv-p { stroke: var(--text-2); }
.mgv-bsig { fill: none; stroke: var(--critical); stroke-linecap: round; opacity: 0; pointer-events: none; }

/* ---------- members ------------------------------------------------------------------------------- */

.mgv-halo { fill: var(--tone); opacity: .12; }
.mgv-corering { fill: none; stroke: var(--tone); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 3; }
.mgv-body {
  fill: var(--tone);
  stroke: var(--bg);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px var(--tone-bd));
  transition: stroke var(--t), stroke-width var(--t);
}
.mgv-node.is-hub .mgv-body { filter: drop-shadow(0 0 8px var(--tone-bd)); }
.mgv-node.t-serious .mgv-body, .mgv-node.t-critical .mgv-body { filter: drop-shadow(0 0 6px var(--tone)); }
.mgv-gl { color: var(--on-accent); pointer-events: none; }
.mgv-gs { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mgv-gf { fill: currentColor; stroke: none; }

/* Down: hollow, with a broken ring - the absence of an answer, not a red one. */
.mgv-node.is-down .mgv-body {
  fill: var(--surface-1);
  stroke: var(--critical);
  stroke-width: 2;
  stroke-dasharray: 3.4 2.6;
  filter: drop-shadow(0 0 4px var(--critical-bd));
}
.mgv-node.is-down .mgv-gl { color: var(--critical); }
.mgv-node.is-down .mgv-halo { opacity: .07; }
/* An arbiter holds no data: small, and a ring rather than a disc. */
.mgv-node.is-arbiter .mgv-body { fill: var(--surface-3); stroke: var(--tone); stroke-width: 1.6; filter: none; }
.mgv-node.is-arbiter .mgv-gl { color: var(--tone); }
.mgv-node.is-arbiter .mgv-halo { opacity: .06; }
/* Hidden: a dashed ring round it. */
.mgv-hidring { fill: none; stroke: var(--tone); stroke-width: 1.4; stroke-dasharray: 3 3; }
/* Delayed: a clock on the rim. */
.mgv-clock circle { fill: var(--surface-1); stroke: var(--accent); stroke-width: 1.3; }
.mgv-clock path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mgv-node.is-hover .mgv-body { stroke: var(--text); stroke-width: 1.8; }
.mgv-node.is-down.is-hover .mgv-body { stroke: var(--critical); stroke-width: 2.6; }

.mgv-beat {
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* The painted members take no pointer; the transparent hit layer above them does. */
.mgv-hit { cursor: pointer; outline: none; }
.mgv-svg .mgv-hit:focus, .mgv-svg .mgv-hit:focus-visible { outline: none; }
.mgv-hitarea { fill: transparent; stroke: none; }
.mgv-sel { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.mgv-focus { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 2.5; opacity: 0; }
.mgv-hit:focus-visible .mgv-focus { opacity: 1; }

/* ---------- labels -------------------------------------------------------------------------------- */

.mgv-name, .mgv-state, .mgv-nums {
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-opacity: .92;
}
.mgv-name { font-family: var(--mono); font-size: var(--fs-small); font-weight: 600; fill: var(--text); }
.mgv-state { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; fill: var(--text-2); }
.mgv-nums { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500; fill: var(--text-3); }
.mgv-tone { fill: var(--tone); }
.mgv-flag { font-weight: 600; letter-spacing: .02em; fill: var(--accent); }
.mgv-lagv { fill: var(--tone); font-weight: 700; }
.mgv-lagv.t-muted { fill: var(--text-3); font-weight: 500; }
.mgv-lab.is-hover .mgv-name { fill: var(--accent); }

/* ---------- the hover card ------------------------------------------------------------------------- */

.mgv-card {
  position: absolute;
  z-index: 6;
  padding: 10px 12px 9px;
  pointer-events: none;
  border-radius: var(--r-s);
  border: 1px solid var(--tone-bd);
  background: var(--raised);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.mgv-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mgv-card-g {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
.mgv-card.is-down .mgv-card-g { background: transparent; border: 1.5px dashed var(--critical); color: var(--critical); }
.mgv-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 13px/1.2 var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv-card-sub {
  margin: 3px 0 0 28px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv-card-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin-top: 8px; }
.mgv-card-r { display: contents; }
.mgv-card-k {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  align-self: baseline;
}
.mgv-card-v {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: baseline;
}
.mgv-card-v.is-toned { color: var(--tone); font-weight: 600; }
.mgv-card-r.is-wrap .mgv-card-v {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mgv-card-r.is-prose .mgv-card-v { font-family: var(--font); font-size: var(--fs-small); -webkit-line-clamp: 2; }

/* ---------- note, headline, legend, screen-reader list -------------------------------------------- */

.mgv-note {
  margin: 8px 4px 0;
  padding: 6px 11px;
  border: 1px solid var(--tone-bd);
  border-radius: var(--r-s);
  background: var(--tone-bg);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.mgv-note b { color: var(--text); }
.mgv-headline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 10px 4px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.mgv-headline i {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.mgv.is-compact .mgv-headline { justify-content: flex-start; margin-top: 6px; font-size: var(--fs-small); }
.mgv.is-compact .mgv-headline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mgv.is-compact .mgv-headline i { width: 17px; height: 17px; font-size: 9.5px; }
.mgv-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 8px 4px 0;
  font-size: var(--fs-small);
  color: var(--text-3);
}
.mgv-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mgv-lg-flow { display: inline-flex; align-items: center; gap: 3px; }
.mgv-lg-flow b { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 5px var(--tone-bd); }
.mgv-lg-down { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--critical); }
.mgv-lg-arb { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tone); background: var(--surface-3); }
.mgv-lg-hid { width: 11px; height: 11px; border-radius: 50%; border: 1.4px dashed var(--tone); }
.mgv-lg-clk { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 1.3px solid var(--accent); }
.mgv-lg-clk::after {
  content: "";
  position: absolute;
  left: 3.6px;
  top: 1.4px;
  width: 2.4px;
  height: 3.4px;
  border-left: 1.2px solid var(--accent);
  border-bottom: 1.2px solid var(--accent);
}
.mgv-lg-note { color: var(--text-3); }
.mgv-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

/* ---------- the engine room ------------------------------------------------------------------------ */

.mgv-eng {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font);
}
.mgv-grow { flex: 1 1 auto; }
.mgv-dim { color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; }
.mgv-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  color: var(--tone);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mgv-pill i { font-style: normal; font-weight: 800; }
.mgv-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 6px var(--tone-bd); }

.mgv-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid var(--tone-bd);
  border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--tone-bg), transparent 70%);
}
.mgv-ribbon-h {
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv-ribbon-r { font-weight: 400; color: var(--text-2); }

.mgv-grid { display: grid; gap: 12px; min-width: 0; }
.mgv-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background-color: var(--surface-1);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-3) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-3) 4%, transparent) 1px, transparent 1px);
  background-size: 100% 18px, 18px 100%;
}
/* Corner brackets in the tile's tone: an instrument panel, not a card. */
.mgv-tile::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border-radius: 4px;
  background:
    linear-gradient(var(--tone-bd), var(--tone-bd)) left top / 10px 1.5px no-repeat,
    linear-gradient(var(--tone-bd), var(--tone-bd)) left top / 1.5px 10px no-repeat,
    linear-gradient(var(--tone-bd), var(--tone-bd)) right bottom / 10px 1.5px no-repeat,
    linear-gradient(var(--tone-bd), var(--tone-bd)) right bottom / 1.5px 10px no-repeat;
}
.mgv-tile.t-serious, .mgv-tile.t-critical { border-color: var(--tone-bd); box-shadow: inset 0 0 22px var(--tone-bg); }
/* A slow scan line down each tile while the page is live. */
.mgv-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tone) 7%, transparent), transparent);
  opacity: 0;
}
.mgv-tile > * { position: relative; }
.mgv-tile-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mgv-tile-n { flex: 0 0 auto; font: 600 var(--fs-micro)/1 var(--mono); color: var(--tone); opacity: .85; }
.mgv-tile-k {
  flex: 0 0 auto;
  font: 700 var(--fs-small)/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.mgv-tile-sub {
  min-width: 0;
  font-size: var(--fs-micro);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv-tile-b { flex: 1 1 auto; min-width: 0; }
.mgv-tile-f {
  min-width: 0;
  font-size: var(--fs-micro);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dials */
.mgv-gauge { display: block; flex: 0 0 auto; overflow: visible; }
.mgv-arc-track { fill: none; stroke: var(--surface-3); stroke-linecap: round; }
.mgv-arc-fill {
  fill: none;
  stroke: var(--tone);
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--tone-bd));
}
.mgv-arc-fill.is-inner { opacity: .9; }
.mgv-tick { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; }
.mgv-tick.is-trigger { stroke: var(--tone); stroke-width: 2; }
.mgv-band { fill: none; stroke: var(--tone); stroke-opacity: .7; stroke-linecap: butt; }
.mgv-g-big {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.mgv-g-big.t-serious, .mgv-g-big.t-critical, .mgv-g-big.t-warning { fill: var(--tone); }
.mgv-g-cap { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; fill: var(--text-3); }

.mgv-cache, .mgv-conn { display: flex; align-items: center; gap: 12px; }
.mgv-stats { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 auto; }
.mgv-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mgv-stat-k {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.mgv-stat-v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--mono);
}
.mgv-stat-v b {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mgv-stat.t-serious .mgv-stat-v b, .mgv-stat.t-critical .mgv-stat-v b, .mgv-stat.t-warning .mgv-stat-v b {
  color: var(--tone);
  text-shadow: 0 0 12px var(--tone-bd);
}
.mgv-stat-v i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); }
.mgv-stat-v em { font-style: normal; font-size: var(--fs-micro); color: var(--tone); margin-left: 4px; }
.mgv-stat-l {
  min-width: 0;
  font-size: var(--fs-micro);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgv-led {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
}
.mgv-led.is-on { background: var(--serious); border-color: var(--serious); box-shadow: 0 0 8px var(--serious); }
.mgv-led.is-null { background: transparent; border-style: dashed; }
.mgv-null { color: var(--text-3); font-family: var(--mono); font-weight: 500; cursor: help; }
b.mgv-null, .mgv-stat-v .mgv-null { font-size: 15px; }

/* tickets */
.mgv-rings { display: flex; align-items: flex-start; justify-content: space-around; gap: 10px; }
.mgv-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mgv-ring-svg { display: block; overflow: visible; }
.mgv-seg { fill: none; stroke: var(--surface-3); stroke-linecap: butt; }
.mgv-seg.is-lit { stroke: var(--tone); filter: drop-shadow(0 0 3px var(--tone-bd)); }
.mgv-ring-k {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mgv-ring-l { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.mgv-ring-l b { font-family: var(--mono); font-size: var(--fs-small); color: var(--tone); }
.mgv-ring.t-ok .mgv-ring-l b { color: var(--text); }

/* queues */
.mgv-queues, .mgv-ops, .mgv-lats { display: flex; flex-direction: column; gap: 8px; }
.mgv-bigrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mgv-big { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.mgv-big b, .mgv-big .mgv-null { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mgv-big.t-warning b, .mgv-big.t-serious b, .mgv-big.t-critical b { color: var(--tone); text-shadow: 0 0 14px var(--tone-bd); }
.mgv-big-u { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.mgv-lim { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.mgv-qbar {
  position: relative;
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mgv-qseg { display: block; height: 100%; }
.mgv-qseg.is-r { background: var(--accent); }
.mgv-qseg.is-w { background: var(--accent-2); }
.mgv-qmark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--warning); }
.mgv-qkey { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.mgv-qkey b { font-family: var(--mono); color: var(--text); }
.mgv-qkey > span { display: inline-flex; align-items: center; gap: 5px; }
.mgv-sw { width: 9px; height: 9px; border-radius: 2px; }
.mgv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding-top: 7px; border-top: 1px solid var(--hairline); }
.mgv-sw.is-r { background: var(--accent); }
.mgv-sw.is-w { background: var(--accent-2); }

/* throughput: an equaliser */
.mgv-eq { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.mgv-eq-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mgv-eq-v {
  max-width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.mgv-eq-well {
  position: relative;
  display: block;
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--text-3) 8%, transparent);
  overflow: hidden;
}
.mgv-eq-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent));
  box-shadow: 0 0 10px var(--accent-bd);
}
.mgv-eq-col.is-top .mgv-eq-bar { background: linear-gradient(0deg, color-mix(in srgb, var(--accent-2) 45%, transparent), var(--accent-2)); }
.mgv-eq-col.is-top .mgv-eq-v { color: var(--text); font-weight: 600; }
.mgv-eq-k {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* latency */
.mgv-lat { display: grid; grid-template-columns: calc(var(--fs-micro) * 7.2) minmax(0, 1fr) calc(var(--fs-micro) * 6.4); align-items: center; gap: 10px; }
.mgv-lat-k {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mgv-lat-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); }
.mgv-lat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 35%, transparent), var(--tone));
  box-shadow: 0 0 8px var(--tone-bd);
}
.mgv-lat-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--warning); }
.mgv-lat-v { text-align: right; font-family: var(--mono); white-space: nowrap; }
.mgv-lat-v b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mgv-lat.t-warning .mgv-lat-v b { color: var(--tone); }
.mgv-lat-v .mgv-null { font-size: 14px; }
.mgv-lat-scale {
  position: relative;
  height: 12px;
  margin: 0 calc(var(--fs-micro) * 6.4 + 10px) 0 calc(var(--fs-micro) * 7.2 + 10px);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.mgv-lat-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; line-height: 12px; }
.mgv-lat-scale .mgv-lat-slow { color: var(--warning); }

/* ---------- motion ---------------------------------------------------------------------------------- */

/* Longhands for the particles: their duration and delay are set inline from the lag, and an
   `animation:` shorthand here would reset both. */
.mgv-anim .mgv-p {
  opacity: .95;
  animation-name: mgv-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mgv-anim .mgv-p.is-tail { opacity: .4; filter: none; }
.mgv-anim .mgv-bsig { animation: mgv-blocked 2.6s cubic-bezier(.25, .5, .6, 1) infinite; }
.mgv-anim .mgv-beat { animation: mgv-beat 2.8s cubic-bezier(.2, .6, .35, 1) infinite; }
.mgv-anim .mgv-beat.is-echo { animation-delay: 1.4s; }
.mgv-anim .mgv-node.is-hub .mgv-halo { animation: mgv-breathe 2.8s ease-in-out infinite; }
.mgv-anim .mgv-led.is-on { animation: mgv-led 1.1s ease-in-out infinite; }
.mgv-anim .mgv-tile::after { opacity: 1; animation: mgv-scan 7s linear infinite; }

@keyframes mgv-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* The break sits at half the line's length (44 to 56 of the 100 the path is measured in), so a
   pulse that ends at 57 dies just short of it on every line, long or short. */
@keyframes mgv-blocked {
  0% { stroke-dashoffset: 100; opacity: 0; }
  18% { opacity: .95; }
  70% { opacity: .9; }
  100% { stroke-dashoffset: 57; opacity: 0; }
}
@keyframes mgv-beat { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.95); opacity: 0; } }
@keyframes mgv-breathe { 0%, 100% { opacity: .1; } 50% { opacity: .22; } }
@keyframes mgv-led { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mgv-scan { from { transform: translateY(0); } to { transform: translateY(440%); } }

/* Switched off for the reader who asked, and for data-motion="off" - unless data-motion="on"
   overrides the operating system, which inside a Remote Desktop session says "reduce" for
   everyone. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .mgv-anim .mgv-p,
  :root:not([data-motion="on"]) .mgv-anim .mgv-bsig,
  :root:not([data-motion="on"]) .mgv-anim .mgv-beat { animation: none; display: none; }
  :root:not([data-motion="on"]) .mgv-anim .mgv-halo,
  :root:not([data-motion="on"]) .mgv-anim .mgv-led { animation: none; }
  :root:not([data-motion="on"]) .mgv-anim .mgv-tile::after { animation: none; opacity: 0; }
}
:root[data-motion="off"] .mgv-anim .mgv-p,
:root[data-motion="off"] .mgv-anim .mgv-bsig,
:root[data-motion="off"] .mgv-anim .mgv-beat { animation: none; display: none; }
:root[data-motion="off"] .mgv-anim .mgv-halo,
:root[data-motion="off"] .mgv-anim .mgv-led { animation: none; }
:root[data-motion="off"] .mgv-anim .mgv-tile::after { animation: none; opacity: 0; }