/*! Mannfred live systems rail © 2026 Thomas Mannfred Carlsson */
.mrail {

  --mr-bg: #363a43;

  --mr-bg-top: #1d2024;
  --mr-line: rgba(255, 255, 255, .09);
  --mr-line-soft: rgba(255, 255, 255, .052);

  --mr-text: #eaeef3;
  --mr-bright: #d5dce4;
  --mr-muted: #a3acb9;
  --mr-faint: #838d9b;

  --mr-teal: #6fd8c4;
  --mr-blue: #7db6f0;
  --mr-amber: #e8b166;
  --mr-violet: #b0a2ee;
  --mr-red: #ec8078;
  --mr-idle: #5f6877;

  --mr-plot: 56px;

  --mr-content: 1140px;

  --mr-content-max: 1140px;
  --mr-gutter: clamp(12px, 1.55vw, 24px);
  --mr-modpad: clamp(11px, 1.15vw, 17px);

  --mr-mono: ui-monospace, SFMono-Regular, "SF Mono", "Roboto Mono", "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mr-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 150px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--mr-text);
  background: var(--mr-bg);
  border: 0;

  border-bottom: 1px solid rgba(0, 0, 0, .38);
  font-family: var(--mr-sans);
  font-size: 12px;
  line-height: normal;
  text-align: left;
  text-indent: 0;
  text-transform: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.mrail *,
.mrail *::before,
.mrail *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;

  vertical-align: baseline;
  text-indent: 0;
  text-transform: none;
  text-decoration: none;
  list-style: none;
  max-width: none;
  min-width: 0;
  float: none;
  word-break: normal;
  overflow-wrap: normal;
  box-shadow: none;
  transform: none;
}

.mrail svg {
  display: block;
  overflow: visible;
  max-width: none;
}

.mrail__fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .016) 1px, transparent 1px);
  background-size: 100% 25px, 72px 100%;
}

.mrail__fx::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -18%;
  width: 18%;
  opacity: .5;
  background: linear-gradient(90deg, transparent, rgba(111, 216, 196, .07), transparent);
  animation: mrail-scan 14s linear infinite;
}

@keyframes mrail-scan { to { transform: translateX(760%); } }

.mrail__noscript {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  background: var(--mr-bg);
  text-align: center;
}

.mrail__noscript b {
  color: var(--mr-bright);
  font-family: var(--mr-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mrail__noscript b i { font-style: normal; color: #5c6675; }

.mrail__noscript span {
  max-width: 62ch;
  color: var(--mr-muted);
  font-family: var(--mr-mono);
  font-size: 8.5px;
  line-height: 1.55;
  letter-spacing: .05em;
}

.mrail__bar,
.mrail__grid { position: relative; z-index: 2; }

.mrail__bar {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 28px;

  padding-block: 0;
  padding-inline: max(var(--mr-gutter), calc((100% - var(--mr-content)) / 2));
  border-bottom: 1px solid var(--mr-line);
  background: var(--mr-bg-top);
  font-family: var(--mr-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .085em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mrail__brand {
  flex: 0 0 auto;
  color: var(--mr-bright);
  font-weight: 700;
  letter-spacing: .13em;
}

.mrail__health {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: var(--mr-teal);
}

.mrail__dot {
  position: relative;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.mrail__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .4;
  animation: mrail-pulse 2.5s ease-out infinite;
}

@keyframes mrail-pulse {
  0%   { transform: scale(.45); opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}

.mrail[data-health="degraded"] .mrail__health { color: var(--mr-amber); }
.mrail[data-health="down"] .mrail__health,
.mrail[data-health="offline"] .mrail__health { color: var(--mr-red); }

.mrail__estate {
  min-width: 0;
  overflow: hidden;
  color: var(--mr-muted);
  text-overflow: ellipsis;
}

.mrail__estate b { color: var(--mr-bright); font-weight: 650; }

.mrail__spacer { flex: 1 1 auto; }

.mrail__pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--mr-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .04);
  color: var(--mr-muted);
  font-size: 8.5px;
}

.mrail__pill--flag { color: var(--mr-amber); border-color: rgba(232, 177, 102, .3); }
.mrail__pill[hidden] { display: none; }

.mrail__age {
  flex: 0 0 auto;
  color: var(--mr-faint);
  font-size: 8.5px;
}

.mrail__grid {
  display: grid;
  grid-template-columns:
    minmax(200px, .73fr)
    minmax(285px, 1.27fr)
    minmax(255px, 1.13fr)
    minmax(270px, 1.2fr);
  height: 120px;
  width: 100%;
  max-width: var(--mr-content);
  margin-inline: auto;

  padding-inline: calc(var(--mr-gutter) - var(--mr-modpad));
}

.mrail__mod {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 7px var(--mr-modpad) 5px;
  border-right: 1px solid var(--mr-line);
}

.mrail__mod:last-child { border-right: 0; }

.mrail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  height: 13px;
  margin-bottom: 1px;
}

.mrail__title {
  min-width: 0;
  overflow: hidden;
  color: var(--mr-muted);
  font-family: var(--mr-mono);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrail__readout {
  flex: 0 0 auto;
  color: var(--mr-bright);
  font-family: var(--mr-mono);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.mrail__readout em {
  margin-left: 4px;
  color: var(--mr-faint);
  font-size: 8px;
  font-style: normal;
  font-weight: 550;
  text-transform: uppercase;
}

.mrail__fleet {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 31px;
}

.mrail__pct {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #f2f6f8;
  font-family: var(--mr-mono);
  font-size: 29px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.075em;
}

.mrail__pct small {
  margin-left: 1px;
  color: var(--mr-teal);
  font-size: 14px;
  letter-spacing: -.03em;
}

.mrail__fleet-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 2px;
  color: var(--mr-muted);
  font-family: var(--mr-mono);
  font-size: 7.6px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mrail__fleet-meta b {
  display: block;
  margin-bottom: 1px;
  color: var(--mr-bright);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .01em;
}

.mrail__fleet-meta i { font-style: normal; color: var(--mr-amber); }

.mrail__segs {
  display: grid;
  grid-template-columns: repeat(14, minmax(2px, 1fr));
  gap: 3px;
  height: 6px;
  margin: 4px 0;
}

.mrail__seg {
  border-radius: 1px;
  background: var(--mr-idle);
  opacity: .55;
  transition: background 220ms ease, opacity 220ms ease;
}

.mrail__seg--active {
  background: var(--mr-teal);
  opacity: .92;
  box-shadow: 0 0 8px rgba(111, 216, 196, .18);
}

.mrail__seg--blocked { background: var(--mr-amber); opacity: .95; }

.mrail__counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 8px;
  height: 13px;
}

.mrail__count {
  min-width: 0;
  color: var(--mr-muted);
  font-family: var(--mr-mono);
  font-size: 7.2px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.mrail__count b {
  display: inline-block;
  margin-right: 3px;
  color: var(--mr-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.mrail__count--active b { color: var(--mr-teal); }
.mrail__count--blocked b { color: var(--mr-amber); }

.mrail__dd {
  display: grid;
  grid-template-columns: 54px 1fr 34px;
  align-items: center;
  gap: 6px;
  height: 27px;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--mr-line-soft);
}

.mrail__dd-label {
  color: var(--mr-faint);
  font-family: var(--mr-mono);
  font-size: 6.6px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mrail__dd-label b {
  display: block;
  margin-top: 2px;
  color: var(--mr-muted);
  font-size: 6.9px;
  font-weight: 600;
  letter-spacing: .02em;
}

.mrail .mrail__dd-chart { width: 100%; height: 22px; }

.mrail__dd-now {
  color: var(--mr-amber);
  font-family: var(--mr-mono);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: right;
}

.mrail__dd-now small {
  display: block;
  margin-top: 2px;
  color: var(--mr-faint);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.mrail-ddbar { fill: rgba(232, 177, 102, .3); }
.mrail-ddbar--recent { fill: rgba(232, 177, 102, .55); }
.mrail-ddbar--now { fill: var(--mr-amber); }
.mrail-ddbase { stroke: rgba(255, 255, 255, .1); stroke-width: 1; shape-rendering: crispEdges; }

.mrail__chart {
  position: relative;
  height: 88px;
  user-select: none;
  -webkit-user-select: none;
}

.mrail .mrail__svg { width: 100%; height: 100%; }

.mrail-grid-h {
  stroke: rgba(255, 255, 255, .058);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.mrail-grid-d {
  stroke: rgba(255, 255, 255, .048);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  shape-rendering: crispEdges;
}

.mrail-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mrail-line--agents { stroke: var(--mr-teal); stroke-width: 1.75; }
.mrail-line--ci { stroke: var(--mr-blue); stroke-width: 1.65; }
.mrail-line--dnsbl1 { stroke: var(--mr-amber); stroke-width: 1.45; }
.mrail-line--dnsbl2 { stroke: var(--mr-violet); stroke-width: 1.35; }
.mrail-line--sensing { stroke: var(--mr-teal); stroke-width: 1.5; }
.mrail-line--entities { stroke: var(--mr-blue); stroke-width: 1.35; opacity: .85; }

.mrail-line--land { stroke: var(--mr-blue); stroke-width: 1.3; }
.mrail-line--air  { stroke: #9fd8e8; stroke-width: 1.15; opacity: .9; }
.mrail-line--rf   { stroke: #86c98b; stroke-width: 1.15; opacity: .9; }

.mrail__legend .is-land::before { background: var(--mr-blue); }
.mrail__legend .is-air::before { background: #9fd8e8; }
.mrail__legend .is-rf::before { background: #86c98b; }

.mrail-area { fill: url(#mrailAgentFill); }
.mrail-bar--sub { fill: rgba(232, 177, 102, .2); shape-rendering: crispEdges; }
.mrail-bar--ci { fill: rgba(125, 182, 240, .2); shape-rendering: crispEdges; }

.mrail-tip-dot {
  stroke: var(--mr-bg);
  stroke-width: 1.5;
}

.mrail-tip-dot--agents,
.mrail-tip-dot--sensing { fill: var(--mr-teal); }
.mrail-tip-dot--ci,
.mrail-tip-dot--entities { fill: var(--mr-blue); }
.mrail-tip-dot--dnsbl1 { fill: var(--mr-amber); }
.mrail-tip-dot--dnsbl2 { fill: var(--mr-violet); }

.mrail-axis {
  fill: #6d7684;
  font-family: var(--mr-mono);
  font-size: 7px;
  letter-spacing: .03em;
}

.mrail-peak-line {
  stroke: rgba(255, 255, 255, .2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  shape-rendering: crispEdges;
}

.mrail-peak-label {
  fill: var(--mr-faint);
  font-family: var(--mr-mono);
  font-size: 6.6px;
  font-weight: 600;
  letter-spacing: .05em;
}

.mrail-scrub {
  stroke: rgba(255, 255, 255, .24);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  pointer-events: none;
}

.mrail-capture { fill: transparent; cursor: crosshair; }

.mrail__legend {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: flex;
  gap: 8px;
  color: var(--mr-faint);
  font-family: var(--mr-mono);
  font-size: 6.9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}

.mrail__legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mrail__legend span::before {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--mr-teal);
}

.mrail__legend .is-bar::before { width: 5px; height: 5px; background: rgba(232, 177, 102, .4); }
.mrail__legend .is-blue::before { background: var(--mr-blue); }
.mrail__legend .is-blue-bar::before { width: 5px; height: 5px; background: rgba(125, 182, 240, .45); }
.mrail__legend .is-amber::before { background: var(--mr-amber); }
.mrail__legend .is-violet::before { background: var(--mr-violet); }

.mrail-tip {
  position: fixed;
  z-index: 2147483000;
  display: none;
  min-width: 132px;
  padding: 7px 9px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 3px;
  background: rgba(28, 31, 37, .97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .36);
  color: #dfe5ec;
  font-family: var(--mr-mono, ui-monospace, monospace);
  font-size: 9px;
  line-height: 1.5;
  white-space: pre;
}

.mrail-tip b {
  display: block;
  margin-bottom: 2px;
  color: #a3acb9;
  font-size: 7.8px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mrail[data-size="lg"] .mrail__grid { grid-template-columns: 205px minmax(300px, 1.28fr) minmax(265px, 1.12fr); }
.mrail[data-size="lg"] .mrail__mod--ci { display: none; }
.mrail[data-size="lg"] .mrail__mod--systems { border-right: 0; }
.mrail[data-size="lg"] .mrail__estate { max-width: 330px; }

.mrail[data-size="md"] .mrail__grid { grid-template-columns: 200px minmax(300px, 1fr); }
.mrail[data-size="md"] .mrail__mod--systems,
.mrail[data-size="md"] .mrail__mod--ci { display: none; }
.mrail[data-size="md"] .mrail__mod--agents { border-right: 0; }
.mrail[data-size="md"] .mrail__estate { display: none; }

.mrail[data-size="sm"] .mrail__grid { grid-template-columns: 165px minmax(210px, 1fr); }
.mrail[data-size="sm"] .mrail__mod--systems,
.mrail[data-size="sm"] .mrail__mod--ci { display: none; }
.mrail[data-size="sm"] .mrail__mod--agents { border-right: 0; }
.mrail[data-size="sm"] .mrail__estate,
.mrail[data-size="sm"] .mrail__fleet-meta,
.mrail[data-size="sm"] .mrail__pill { display: none; }
.mrail[data-size="sm"] .mrail__mod { padding-inline: 10px; }
.mrail[data-size="sm"] .mrail__pct { font-size: 26px; }
.mrail[data-size="sm"] .mrail__dd { grid-template-columns: 46px 1fr 30px; }
.mrail[data-size="sm"] .mrail__dd-now { font-size: 10.5px; }

.mrail[data-size="xs"] .mrail__grid { grid-template-columns: 132px minmax(150px, 1fr); }
.mrail[data-size="xs"] .mrail__mod--systems,
.mrail[data-size="xs"] .mrail__mod--ci { display: none; }
.mrail[data-size="xs"] .mrail__mod--agents { border-right: 0; }
.mrail[data-size="xs"] .mrail__estate,
.mrail[data-size="xs"] .mrail__fleet-meta,
.mrail[data-size="xs"] .mrail__pill,
.mrail[data-size="xs"] .mrail__age,
.mrail[data-size="xs"] .mrail__legend { display: none; }
.mrail[data-size="xs"] .mrail__mod { padding-inline: 10px; }
.mrail[data-size="xs"] .mrail__bar { gap: 9px; padding-inline: 10px; }
.mrail[data-size="xs"] .mrail__pct { font-size: 23px; }
.mrail[data-size="xs"] .mrail__counts { gap: 3px; }
.mrail[data-size="xs"] .mrail__count { font-size: 6.2px; }
.mrail[data-size="xs"] .mrail__count b { font-size: 9px; }
.mrail[data-size="xs"] .mrail__dd { grid-template-columns: 38px 1fr 28px; gap: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mrail__fx::after,
  .mrail__dot::after { animation: none !important; }
  .mrail__seg { transition: none !important; }
}