.telemetry-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  padding: clamp(5rem, 11vw, 8rem) 0 4rem;
}
.telemetry-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3rem, 7.6vw, 6.7rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
}
.scope-stamp {
  padding: 1.2rem 0 0 1.2rem;
  border-top: 3px solid var(--orange);
  border-left: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.92rem;
}
.scope-stamp strong {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ink);
  font: 700 0.72rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lab-shell {
  margin: 0 0 clamp(4rem, 9vw, 7rem);
  background: #101310;
  color: #e8eee8;
  border: 1px solid #303730;
  box-shadow: 0 1.75rem 5rem color-mix(in srgb, #000 22%, transparent);
}
.lab-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #303730;
  color: #909b90;
  font: 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lab-live::before {
  content: "";
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #50dc9c;
  box-shadow: 0 0 0.8rem #50dc9c;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0.35; box-shadow: none; } }

.lab-stage {
  position: relative;
  min-height: 19rem;
  padding: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(#283028 1px, transparent 1px) 0 0 / 100% 3.5rem,
    linear-gradient(90deg, #202720 1px, transparent 1px) 0 0 / 4rem 100%;
}
.lab-stage svg { width: 100%; height: 15rem; overflow: visible; }
.lab-stage .baseline { stroke: #394239; stroke-width: 1; }
.lab-stage .signal-path {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 0.35rem rgba(96, 165, 250, 0.45));
}
.delivery-node circle { fill: #111; stroke: #50dc9c; stroke-width: 2; }
.delivery-node text { fill: #a8b2a8; font: 10px var(--mono); }
.delivery-node.duplicate circle { stroke: #ffb45d; }
.delivery-node.late circle { stroke: #ff715b; }
.delivery-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.delivery-node.visible { opacity: 1; animation: node-arrive 280ms ease-out; }
@keyframes node-arrive { from { transform: scale(0.35); } }

.lab-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #303730;
  border-bottom: 1px solid #303730;
}
.metric { padding: 1rem 1.1rem; }
.metric + .metric { border-left: 1px solid #303730; }
.metric span { display: block; color: #7f8a7f; font: 0.65rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.metric strong { display: block; margin-top: 0.25rem; color: #f3f7f3; font: 600 1.7rem/1.1 var(--mono); }

.lab-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}
.lab-buttons { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.lab-buttons button {
  padding: 0.62rem 0.85rem;
  border: 1px solid #465046;
  background: transparent;
  color: #e8eee8;
  cursor: pointer;
  font: 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.lab-buttons button:hover, .lab-buttons button:focus-visible { border-color: #ff805c; }
.lab-buttons button.primary { background: #e65b34; border-color: #e65b34; color: #101310; }
.lab-status { align-self: center; color: #8e998e; font: 0.72rem/1.4 var(--mono); }

.delivery-log {
  max-height: 18rem;
  overflow-y: auto;
  border-top: 1px solid #303730;
  font: 0.68rem/1.5 var(--mono);
}
.delivery-log-header, .delivery-entry {
  display: grid;
  grid-template-columns: 4rem 7rem 1fr 7rem 7rem;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
}
.delivery-log-header { position: sticky; top: 0; z-index: 1; background: #151915; color: #6f796f; text-transform: uppercase; }
.delivery-entry { border-top: 1px solid #242a24; color: #aab4aa; }
.delivery-entry .ok { color: #50dc9c; }
.delivery-entry .warn { color: #ffb45d; }
.delivery-entry .late { color: #ff715b; }

.contract-line {
  display: grid;
  grid-template-columns: 4rem minmax(10rem, 0.45fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--rule);
}
.contract-line:last-child { border-bottom: 1px solid var(--rule); }
.contract-line h3, .contract-line p { margin: 0; }
.contract-line p { color: var(--muted); }

.failure-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.failure-table th, .failure-table td { padding: 0.85rem 1rem 0.85rem 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.failure-table th { color: var(--faint); font: 600 0.68rem/1.4 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.failure-table td { color: var(--muted); }
.failure-table td:first-child { color: var(--ink); font-weight: 600; }

@media (max-width: 780px) {
  .telemetry-hero { grid-template-columns: 1fr; }
  .lab-metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid #303730; }
  .metric:nth-child(4) { border-top: 1px solid #303730; }
  .delivery-log-header, .delivery-entry { grid-template-columns: 3rem 6rem 1fr 5.5rem; }
  .delivery-log-header span:nth-child(4), .delivery-entry span:nth-child(4) { display: none; }
  .contract-line { grid-template-columns: 3rem minmax(0, 1fr); }
  .contract-line p { grid-column: 2; }
  .failure-table,
  .failure-table tbody,
  .failure-table tr,
  .failure-table td { display: block; width: 100%; }
  .failure-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .failure-table tr { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
  .failure-table td,
  .failure-table td:first-child {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.35rem 0;
    border: 0;
    color: var(--muted);
    font-weight: 400;
  }
  .failure-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font: 600 0.62rem/1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@media (max-width: 520px) {
  .lab-stage { min-height: 14rem; padding: 0.75rem; }
  .lab-stage svg { height: 11rem; }
  .delivery-log-header, .delivery-entry { grid-template-columns: 2.5rem 1fr 5rem; }
  .delivery-log-header span:nth-child(2), .delivery-entry span:nth-child(2) { display: none; }
  .lab-controls { align-items: stretch; }
  .lab-buttons { width: 100%; }
  .lab-buttons button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-live::before, .delivery-node.visible { animation: none; }
}