/* Ekalix - the estate constellation and the estate pulse.   web\estateview.css
 *
 * Every colour here 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), platform colours through .plat-* (--plat).
 *
 * Motion lives only under .esv-anim, which estateview.js sets when motion is allowed and the
 * tab is visible. The rules at the end switch it off again for data-motion="off" and for
 * prefers-reduced-motion unless data-motion="on" - belt and braces, because the script does
 * not render the moving parts at all in either case. The still picture reads on its own.
 *
 * The SVG type is sized from --fs-small, and estateview.js reads the same variable to lay
 * its labels out, so Clarity's larger type reaches the radar without a label ever colliding.
 */

/* ---------- the panel ---------------------------------------------------------------------- */

.esv {
  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 radar takes the verdict's tone: red when something is on fire, a faint
   green when all is well. Quiet by design - it is the planets that should draw the eye. */
.esv::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(460px 300px at 50% 50%, var(--tone-bg), transparent 72%);
  opacity: .9;
}
.esv.t-ok::before, .esv.t-muted::before { opacity: .45; }
.esv > * { position: relative; }
/* framed={false}: inside a card of the page's own, the radar brings no second card with it. */
.esv.is-bare { padding: 4px 12px 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.esv.is-bare::before { opacity: .55; }
.esv.is-bare .esv-stage { margin-top: 4px; }

.esv-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  min-width: 0;
}
.esv-titles { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
.esv-title {
  margin: 0;
  font: 700 15px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.esv-sub {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* props.tools: the caller's controls, kept on one line; the header wraps as whole items. */
.esv-tools { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- chips ------------------------------------------------------------------------------ */

.esv-chips, .esv-beat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.esv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 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;
  white-space: nowrap;
}
.esv-chip i { font-style: normal; color: var(--tone); font-weight: 800; }
.esv-chip b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.esv-chip.is-zero { opacity: .5; background: transparent; border-color: var(--border); }

/* ---------- the stage: rails either side of the radar ---------------------------------------- */

.esv-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  min-width: 0;
}
.esv-map { position: relative; flex: 0 0 auto; max-width: 100%; min-width: 0; }
.esv-svg { display: block; width: 100%; height: auto; overflow: visible; }

.esv-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 4px 0;
}
.esv-rail-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 9px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  font: 700 var(--fs-micro)/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.esv-rail-h b {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--text-2);
}
.esv-rail-r .esv-rail-h b { color: var(--tone); }

.esv-grps, .esv-atts { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.esv-grp {
  padding: 8px 10px 8px;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  min-width: 0;
  transition: background var(--t), border-color var(--t);
}
.esv-grp:hover, .esv-grp.is-hl { background: var(--hover-tint); border-color: var(--border); }
.esv-grp-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esv-grp-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 17px;
  padding: 0 5px;
  flex: 0 0 auto;
  border: 1px solid var(--tone-bd);
  border-radius: 4px;
  background: var(--tone-bg);
  color: var(--tone);
  font: 800 10px/1 var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.esv-grp-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--plat, var(--accent));
}
.esv-grp-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esv-grp-n { flex: 0 0 auto; font: 600 var(--fs-body)/1 var(--mono); color: var(--text-2); }
.esv-grp-bar {
  display: flex;
  gap: 2px;
  height: 5px;
  margin: 8px 0 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-3);
}
.esv-seg { flex: 1 1 0; min-width: 3px; background: var(--tone); }
/* Colour is not the only signal even here: the two "not a verdict" states are hatched. */
.esv-seg.is-unreachable { background: repeating-linear-gradient(135deg, var(--tone) 0 2px, transparent 2px 4px); }
.esv-seg.is-maintenance { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); }
.esv-seg.is-unknown { opacity: .55; }
.esv-grp-st {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tone);
  white-space: nowrap;
  overflow: hidden;
}
.esv-grp-st span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.esv-grp-st i { font-style: normal; font-weight: 800; flex: 0 0 auto; }

.esv-att, .esv-att-none {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.esv-att { cursor: pointer; transition: background var(--t), border-color var(--t); }
.esv-att:hover, .esv-att.is-hl, .esv-att:focus-visible { background: var(--tone-bg); border-color: var(--tone-bd); }
.esv-att-g {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  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;
}
.esv-att.is-unreachable .esv-att-g {
  background: transparent;
  border: 1.5px dashed var(--critical);
  color: var(--critical);
}
.esv-att.t-muted .esv-att-g, .esv-att-none.t-muted .esv-att-g { background: var(--muted-bg); border: 1px solid var(--muted-bd); color: var(--text-2); }
.esv-att.is-muted { opacity: .72; }
.esv-att-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.esv-att-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.esv-att-name {
  min-width: 0;
  font: 600 var(--fs-body)/1.25 var(--mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esv-att-where {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.esv-att-why {
  font-size: var(--fs-small);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esv-att-more { padding: 4px 10px 0 40px; font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.esv-att-none b { font-size: var(--fs-body); color: var(--text); white-space: nowrap; }
.esv-att-none .esv-att-main > span { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the radar face ------------------------------------------------------------------ */

.esv-disc { fill: var(--bg); fill-opacity: .3; }
.esv-band { fill: var(--accent); transition: fill-opacity var(--t); }
/* Production innermost and brightest, then alternating so neighbouring rings separate. */
.esv-band-0 { fill-opacity: .11; }
.esv-band-1 { fill-opacity: .05; }
.esv-band-2 { fill-opacity: .075; }
.esv-band-3 { fill-opacity: .032; }
.esv-band-4 { fill-opacity: .055; }
.esv-band-5 { fill-opacity: .025; }
.esv-band.is-hl { fill-opacity: .17; }
.esv-by-platform .esv-band { opacity: .5; }
.esv-wedge { fill: var(--plat, var(--accent)); fill-opacity: .07; transition: fill-opacity var(--t); }
.esv-wedge.is-hl { fill-opacity: .15; }
.esv-ringline { fill: none; stroke: var(--border-2); stroke-width: 1; }
.esv-ringline.is-first { stroke: var(--accent-bd); }
.esv-orbit { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 1 4; }
.esv-spoke { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 5; }
.esv-spoke.is-edge { stroke: var(--border-2); stroke-dasharray: none; }
.esv-edge { fill: none; stroke: var(--border-2); stroke-width: 1; }
.esv-ticks { fill: none; stroke: var(--border-2); stroke-width: 5; }
.esv-rim { fill: none; stroke: var(--plat, var(--text-3)); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.esv-by-platform .esv-rim { stroke-width: 3.4; }

/* ---------- ring tags and slice labels ---------------------------------------------------------- */

.esv-svg text { font-family: var(--font); }
.esv-tag-bg { fill: var(--surface-1); stroke: var(--border-2); stroke-width: 1; }
.esv-tag-dot { fill: var(--tone); }
.esv-tag-code {
  font-family: var(--mono);
  font-size: calc(var(--fs-small, 11px) * .773);
  font-weight: 700;
  letter-spacing: .04em;
  fill: var(--tone);
}
.esv-tag-name { font-size: calc(var(--fs-small, 11px) * .82); font-weight: 600; fill: var(--text-2); }
.esv-tag-n { font-family: var(--mono); font-size: calc(var(--fs-small, 11px) * .82); font-weight: 500; fill: var(--text-3); }
.esv-by-platform .esv-tag { opacity: .85; }

.esv-rimt {
  font-size: calc(var(--fs-small, 11px) * .864);
  font-weight: 700;
  letter-spacing: .12em;
  fill: var(--plat, var(--text-2));
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.esv-by-platform .esv-rimt { font-size: calc(var(--fs-small, 11px) * .955); }
.esv-rims { font-size: calc(var(--fs-small, 11px) * .82); font-weight: 600; fill: var(--tone); }

/* ---------- replica links ----------------------------------------------------------------------- */

.esv-link-base { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.7; stroke-linecap: round; }
.esv-link.is-async .esv-link-base { stroke-width: 1.3; stroke-dasharray: 7 4; }
.esv-link.is-broken .esv-link-base { stroke: var(--critical); stroke-opacity: .9; stroke-width: 1.6; stroke-dasharray: 3 4; }
.esv-chev { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.esv-xmark circle { fill: var(--surface-1); stroke: var(--critical); stroke-width: 1.4; }
.esv-xmark path { fill: none; stroke: var(--critical); stroke-width: 1.7; stroke-linecap: round; }
.esv-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .1 13.9;
  opacity: 0;
  pointer-events: none;
}

/* ---------- planets ------------------------------------------------------------------------------ */

/* The painted planets take no pointer; the transparent hit layer above them does. */
.esv-nodes, .esv-pulses, .esv-labels, .esv-glints, .esv-links, .esv-core, .esv-face { pointer-events: none; }
.esv-hit { cursor: pointer; outline: none; }
.esv-svg .esv-hit:focus, .esv-svg .esv-hit:focus-visible { outline: none; }
.esv-hitarea { fill: transparent; stroke: none; }
.esv-halo { fill: var(--tone); opacity: .13; }
.esv-node.is-healthy .esv-halo { opacity: .1; }
.esv-body {
  fill: var(--tone);
  stroke: var(--bg);
  stroke-width: 1;
  filter: drop-shadow(0 0 3px var(--tone-bd));
  transition: stroke var(--t), stroke-width var(--t);
}
.esv-node.is-critical .esv-body, .esv-node.is-serious .esv-body { filter: drop-shadow(0 0 6px var(--tone)); }
.esv-gl { color: var(--on-accent); pointer-events: none; }
.esv-gs { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.esv-gf { fill: currentColor; stroke: none; }

/* Unreachable: hollow, with a broken ring - it is the absence of an answer, not a red one. */
.esv-node.is-unreachable .esv-body {
  fill: var(--surface-1);
  stroke: var(--critical);
  stroke-width: 1.8;
  stroke-dasharray: 3.2 2.4;
  filter: drop-shadow(0 0 4px var(--critical-bd));
}
.esv-node.is-unreachable .esv-gl { color: var(--critical); }
.esv-node.is-unreachable .esv-halo { opacity: .08; }
/* Maintenance: calm, muted, on a dashed orbit of its own. */
.esv-node.is-maintenance .esv-body { fill: var(--muted-bg); stroke: var(--muted); stroke-width: 1.2; filter: none; }
.esv-node.is-maintenance .esv-gl { color: var(--muted); }
.esv-node.is-maintenance .esv-halo { opacity: 0; }
.esv-mring { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .85; }
.esv-node.is-unknown .esv-body { fill: var(--surface-3); stroke: var(--muted); stroke-width: 1.2; filter: none; }
.esv-node.is-unknown .esv-gl { color: var(--text-2); }
.esv-node.is-unknown .esv-halo { opacity: .06; }
.esv-node.is-muted { opacity: .55; }

.esv-target { fill: none; stroke: var(--critical); stroke-width: 1; stroke-opacity: .6; stroke-dasharray: 1.5 2.5; pointer-events: none; }
.esv-node.is-hover .esv-body { stroke: var(--text); stroke-width: 1.8; }
.esv-sel { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.esv-focus { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 2.5; opacity: 0; }
.esv-hit:focus-visible .esv-focus { opacity: 1; }

.esv-ping {
  fill: none;
  stroke: var(--critical);
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.esv-glint { fill: none; stroke: var(--tone); stroke-width: 2; opacity: 0; pointer-events: none; }
.esv-sweep { pointer-events: none; transform-box: view-box; }
.esv-sw { fill: var(--accent); }
.esv-swl { stroke: var(--accent); stroke-width: 1.2; opacity: .6; }

/* Hovering a rail row lights its servers and dims the rest. */
.esv-svg.has-hl .esv-node:not(.is-hl), .esv-svg.has-hl .esv-hit:not(.is-hl) { opacity: .2; }
.esv-svg.has-hl .esv-lab:not(.is-hl) { opacity: .22; }
.esv-svg.has-hl .esv-link:not(.is-hl) { opacity: .3; }
.esv-node, .esv-lab, .esv-link { transition: opacity var(--t); }

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

.esv-name {
  font-family: var(--mono);
  font-size: calc(var(--fs-small, 11px) * .955);
  font-weight: 500;
  fill: var(--text-2);
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-opacity: .92;
}
.esv-name.is-flag { fill: var(--text); font-weight: 600; }
.esv-word {
  font-size: calc(var(--fs-small, 11px) * .864);
  font-weight: 600;
  letter-spacing: .01em;
  fill: var(--tone);
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-opacity: .92;
}
.esv-lab.is-muted { opacity: .7; }

/* ---------- the verdict in the middle ---------------------------------------------------------- */

.esv-core-halo { fill: var(--tone); opacity: .14; }
.esv-core-disc { fill: var(--surface-2); stroke: var(--tone-bd); stroke-width: 1.5; }
.esv-core-ring { fill: none; stroke: var(--tone); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 1.5 3.5; }
.esv-core .esv-gl { color: var(--tone); }
.esv-core-num { font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.esv-core-line { font-weight: 600; fill: var(--text-2); }
.esv-core-big { font-weight: 700; fill: var(--text); }
.esv-core-sub { font-weight: 700; letter-spacing: .16em; fill: var(--tone); }

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

.esv-card {
  position: absolute;
  z-index: 6;
  width: 272px;
  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;
}
.esv-card.is-right { transform: translate(var(--esv-off, 22px), -50%); }
.esv-card.is-left { transform: translate(calc(-100% - var(--esv-off, 22px)), -50%); }
.esv-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esv-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;
}
.esv-card.is-unreachable .esv-card-g { background: transparent; border: 1.5px dashed var(--critical); color: var(--critical); }
.esv-card.t-muted .esv-card-g { background: var(--muted-bg); border: 1px solid var(--muted-bd); color: var(--text-2); }
.esv-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 13.5px/1.2 var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esv-card-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.esv-card-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.esv-card-meta { margin-top: 5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esv-card-state { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; min-width: 0; }
.esv-card-word {
  min-width: 0;
  color: var(--tone);
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esv-card-score { flex: 0 0 auto; color: var(--text-3); white-space: nowrap; }
.esv-card-score b { font: 600 13px/1 var(--mono); color: var(--text); }
.esv-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.esv-mchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  color: var(--text-2);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.esv-mchip i { font-style: normal; color: var(--tone); font-weight: 800; }
.esv-mchip b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.esv-mchip.is-zero { opacity: .42; background: transparent; border-color: var(--border); }
.esv-card-alert {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--hairline);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.esv-card-foot { margin-top: 7px; color: var(--text-3); font-size: var(--fs-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

.esv-headline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 12px 4px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
}
.esv-headline i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
}
.esv-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 9px 4px 0;
  font-size: var(--fs-small);
  color: var(--text-3);
}
.esv-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.esv-legend i { font-style: normal; color: var(--tone); font-weight: 800; }
.esv-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 estate pulse --------------------------------------------------------------------- */

.esv-beat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  min-width: 0;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--tone-bg), transparent 34%), linear-gradient(180deg, var(--surface-2), var(--surface-1));
  color: var(--text);
  font-family: var(--font);
}
.esv-beat.t-ok, .esv-beat.t-muted { background: linear-gradient(90deg, var(--tone-bg), transparent 22%), linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.esv-beat-k { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.esv-beat-l {
  font: 700 var(--fs-micro)/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.esv-beat-v {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 700 14px/1.1 var(--font);
  color: var(--tone);
  white-space: nowrap;
}
.esv-beat-v i { font-style: normal; font-weight: 800; }
.esv-beat-s { margin-left: 3px; font: 500 var(--fs-small)/1 var(--font); color: var(--text-3); }
.esv-beat-s b { font: 600 12px/1 var(--mono); color: var(--text-2); }
.esv-beat-plot { position: relative; flex: 1 1 260px; min-width: 160px; height: 40px; overflow: hidden; }
.esv-beat-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.esv-beat-grid line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.esv-beat-line {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.esv-beat-spk {
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px var(--tone-bd));
}
.esv-anim .esv-beat-svg:not(.is-bright) .esv-beat-line { opacity: .55; }
.esv-beat-draw { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.esv-beat-draw .esv-beat-line { stroke: var(--text); stroke-width: 1.6; }
.esv-beat-draw .esv-beat-spk { stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--tone)); }
.esv-beat-scan { position: absolute; inset: 0; pointer-events: none; }
.esv-beat-scan::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--tone);
  box-shadow: 0 0 10px 3px var(--tone-bd);
  opacity: .9;
}
.esv-beat-head {
  position: absolute;
  right: 3px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px var(--tone-bg), 0 0 8px var(--tone-bd);
}

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

.esv-anim .esv-sweep { animation: esv-spin 12s linear infinite; }
.esv-anim .esv-glint { animation: esv-glint 12s linear infinite; }
.esv-anim .esv-ping { animation: esv-ping 2.8s cubic-bezier(.15, .6, .35, 1) infinite; }
.esv-anim .esv-ping.is-echo { animation-delay: 1.4s; }
.esv-anim .esv-flow { opacity: .95; animation: esv-flow 1.6s linear infinite; }
.esv-anim .esv-node.is-breathe .esv-halo { animation: esv-breathe 6.5s ease-in-out infinite; }
.esv-anim .esv-core.t-critical .esv-core-halo { animation: esv-core 2.8s ease-in-out infinite; }
.esv-anim .esv-beat-draw { animation: esv-draw 5s linear infinite; }
.esv-anim .esv-beat-scan { animation: esv-scan 5s linear infinite; }
.esv-anim .esv-beat-head { animation: esv-head 1.4s ease-in-out infinite; }

@keyframes esv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* The glint peaks the moment the sweep's leading edge crosses the planet, then fades with the
   trail. Its delay is set per planet from its angle, in step with the sweep. */
@keyframes esv-glint { 0% { opacity: .95; } 7% { opacity: 0; } 100% { opacity: 0; } }
@keyframes esv-ping { 0% { transform: scale(1); opacity: .85; } 80% { opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes esv-flow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
@keyframes esv-breathe { 0%, 100% { opacity: .07; } 50% { opacity: .2; } }
@keyframes esv-core { 0%, 100% { opacity: .12; } 50% { opacity: .32; } }
@keyframes esv-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  82% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes esv-scan {
  0% { transform: translateX(0); opacity: 1; }
  82% { transform: translateX(100%); opacity: 1; }
  83%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes esv-head { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* 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"]) .esv-anim .esv-sweep,
  :root:not([data-motion="on"]) .esv-anim .esv-glint,
  :root:not([data-motion="on"]) .esv-anim .esv-ping,
  :root:not([data-motion="on"]) .esv-anim .esv-flow,
  :root:not([data-motion="on"]) .esv-anim .esv-beat-draw,
  :root:not([data-motion="on"]) .esv-anim .esv-beat-scan { animation: none; display: none; }
  :root:not([data-motion="on"]) .esv-anim .esv-halo,
  :root:not([data-motion="on"]) .esv-anim .esv-core-halo,
  :root:not([data-motion="on"]) .esv-anim .esv-beat-head { animation: none; }
  :root:not([data-motion="on"]) .esv-anim .esv-beat-svg .esv-beat-line { opacity: 1; }
}
:root[data-motion="off"] .esv-anim .esv-sweep,
:root[data-motion="off"] .esv-anim .esv-glint,
:root[data-motion="off"] .esv-anim .esv-ping,
:root[data-motion="off"] .esv-anim .esv-flow,
:root[data-motion="off"] .esv-anim .esv-beat-draw,
:root[data-motion="off"] .esv-anim .esv-beat-scan { animation: none; display: none; }
:root[data-motion="off"] .esv-anim .esv-halo,
:root[data-motion="off"] .esv-anim .esv-core-halo,
:root[data-motion="off"] .esv-anim .esv-beat-head { animation: none; }
:root[data-motion="off"] .esv-anim .esv-beat-svg .esv-beat-line { opacity: 1; }