body[data-page="ci-cd"] .go-main {
  width: 100%;
  margin: 0;
}

.cicd-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 10px 12px 24px;
}

.cicd-control {
  --cicd-board-width: 1760px;
  container-name: cicd-control;
  container-type: inline-size;
  display: grid;
  gap: 14px;
}

.cicd-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: end;
  max-height: 180px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(97, 175, 239, 0.22);
  background: rgba(7, 10, 14, 0.82);
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 420ms ease,
    opacity 280ms ease,
    padding 420ms ease,
    border-width 420ms ease,
    transform 420ms ease;
}

.cicd-header.is-hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

.cicd-header h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 48px);
}

.cicd-header p {
  max-width: 920px;
  margin: 8px 0 0;
  color: var(--muted);
}

.cicd-signals {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 6px;
}

.cicd-service-layer {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.cicd-telemetry-bottom {
  display: grid;
  gap: 8px;
}

.cicd-signal,
.cicd-service,
.cicd-grid article {
  border: 1px solid var(--line);
  background: rgba(11, 14, 20, 0.88);
}

.cicd-signal {
  display: grid;
  gap: 4px;
  min-width: 86px;
  padding: 9px;
}

.cicd-service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.cicd-signal span,
.cicd-service span,
.cicd-led-line span,
.cicd-table span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 14px rgba(127, 132, 142, 0.5);
}

[data-tone="online"] {
  --led: var(--green);
}

[data-tone="running"] {
  --led: #c678dd;
}

[data-tone="waiting"] {
  --led: #e5c07b;
}

[data-tone="failed"] {
  --led: var(--red);
}

.cicd-signal[data-tone] span,
.cicd-service[data-tone] span,
.cicd-led-line [data-tone],
.cicd-table [data-tone] {
  background: var(--led, var(--muted));
  box-shadow: 0 0 18px var(--led, rgba(127, 132, 142, 0.45));
}

.cicd-signal strong {
  color: var(--text);
  font-size: 26px;
}

.cicd-service strong {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cicd-signal em,
.cicd-service em,
.cicd-service small {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
}

.cicd-service em,
.cicd-service small {
  grid-column: 2;
}

.cicd-service small {
  text-transform: none;
}

.cicd-wall {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(97, 175, 239, 0.28);
  background: #05070a;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.cicd-wall svg {
  display: block;
  width: max(100%, var(--cicd-svg-width, var(--cicd-board-width)));
  min-width: var(--cicd-svg-width, var(--cicd-board-width));
  height: auto;
}

.cicd-wall text {
  fill: var(--text);
  font: 13px Inter, sans-serif;
}

.cicd-wall .grid path {
  stroke: rgba(97, 175, 239, 0.13);
}

.cicd-wall .aws {
  fill: #ffcf8a;
  font-weight: 700;
}

.cicd-wall .route {
  fill: white;
  font-weight: 700;
  font-size: 12px;
}

.cicd-wall .meta,
.cicd-wall .status,
.cicd-wall .stage-status,
.cicd-wall .destination {
  fill: var(--muted);
  font-size: 11px;
}

.cicd-wall .status,
.cicd-wall .stage-status {
  text-anchor: start;
}

.cicd-wall .stage-status {
  fill: #d9b2ef;
  font-weight: 700;
  font-size: 10px;
  text-anchor: start;
  paint-order: stroke;
  stroke: #05070a;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.cicd-wall .stage-actionable,
.cicd-wall .route-actionable {
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(229, 192, 123, 0.24));
}

.cicd-wall .stage-actionable:hover,
.cicd-wall .route-actionable:hover circle,
.cicd-wall .route-actionable:focus circle {
  stroke-width: 2px;
}

.cicd-wall .route-actionable:focus {
  outline: none;
}

.cicd-wall .route-state circle {
  filter: drop-shadow(0 0 12px currentColor);
}

.cicd-wall .route-state text {
  fill: #05070a;
  font-size: 17px;
  font-weight: 900;
  text-anchor: middle;
}

.cicd-wall .state-running text {
  font-size: 14px;
}

.cicd-wall .destination {
  fill: #ffcf8a;
  font-weight: 700;
}

.cicd-wall .highlight .route-segment {
  filter: drop-shadow(0 0 10px rgba(152, 195, 121, 0.65));
}

.cicd-wall .segment-running {
  stroke-dasharray: 28 14;
  animation: cicd-slide 1.8s linear infinite;
  filter: drop-shadow(0 0 10px rgba(198, 120, 221, 0.65));
}

.cicd-wall .stage-running .stage-dot,
.cicd-wall .route-running,
.cicd-wall .destination-running {
  animation: cicd-pulse 1.6s ease-in-out infinite;
}

.cicd-wall .track-retiring .segment-waiting,
.cicd-wall .track-retiring .segment-unknown {
  stroke: #b87333;
  stroke-dasharray: 10 12;
  filter: drop-shadow(0 0 8px rgba(184, 115, 51, 0.7));
}

.cicd-wall .track-retiring .route {
  fill: #ffcf8a;
}

.cicd-wall .segment-waiting {
  stroke-dasharray: 14 10;
  filter: drop-shadow(0 0 8px rgba(229, 192, 123, 0.55));
}

@keyframes cicd-slide {
  to {
    stroke-dashoffset: -84;
  }
}

@keyframes cicd-pulse {
  0%,
  100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 4px rgba(198, 120, 221, 0.5));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(198, 120, 221, 0.95));
  }
}

.cicd-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(520px, 1.2fr);
  gap: 12px;
}

.cicd-grid article {
  min-width: 0;
  padding: 14px;
}

.cicd-grid h3 {
  margin: 0 0 8px;
}

.cicd-led-line,
.cicd-table td:first-child {
  display: flex;
  gap: 9px;
  align-items: center;
}

.cicd-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cicd-grid dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.cicd-grid dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.cicd-table {
  max-height: 260px;
  overflow: auto;
}

.cicd-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cicd-table td {
  padding: 8px;
  border-top: 1px solid var(--line);
}

.cicd-modal[hidden] {
  display: none;
}

.cicd-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
}

.cicd-modal-panel {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid rgba(97, 175, 239, 0.35);
  background:
    linear-gradient(135deg, rgba(97, 175, 239, 0.08), transparent 34%),
    #111820;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  padding: 20px;
}

.cicd-modal-panel h3 {
  margin: 0 0 16px;
  max-width: calc(100% - 86px);
  overflow-wrap: anywhere;
}

.cicd-modal-kicker {
  margin: 0 0 5px;
  color: #e5c07b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cicd-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cicd-modal-grid div {
  min-width: 0;
  border: 1px solid rgba(127, 132, 142, 0.18);
  background: rgba(5, 7, 10, 0.42);
  padding: 10px;
}

.cicd-modal-grid .wide {
  grid-column: 1 / -1;
}

.cicd-modal-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.cicd-modal-grid dd {
  margin: 4px 0 0;
  color: var(--text);
  font: 12px/1.45 "JetBrains Mono", Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.cicd-modal-panel button {
  float: right;
  border: 1px solid rgba(229, 192, 123, 0.65);
  background: rgba(229, 192, 123, 0.12);
  color: #e5c07b;
  padding: 7px 11px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .cicd-control {
    --cicd-board-width: 1360px;
  }

  .cicd-page {
    padding: 8px;
  }

  .cicd-header,
  .cicd-grid {
    grid-template-columns: 1fr;
  }

  .cicd-signals {
    grid-template-columns: repeat(5, minmax(74px, 1fr));
  }

  .cicd-service-layer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cicd-signal {
    min-width: 0;
  }

  .cicd-signal strong {
    font-size: 21px;
  }
}

@media (min-width: 641px) and (max-width: 940px), (min-width: 700px) and (orientation: portrait) {
  .cicd-control {
    --cicd-board-width: 1280px;
    gap: 10px;
  }

  .cicd-header {
    gap: 10px;
    padding: 10px;
  }

  .cicd-header h2 {
    font-size: 26px;
  }

  .cicd-header p {
    font-size: 12px;
  }

  .cicd-wall text {
    font-size: 12px;
  }
}

@container cicd-control (max-width: 900px) {
  .cicd-grid {
    grid-template-columns: 1fr;
  }

  .cicd-service-layer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container cicd-control (max-width: 640px) {
  .cicd-signals,
  .cicd-service-layer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cicd-control {
    --cicd-board-width: 1080px;
  }

  .cicd-page {
    padding: 6px;
  }

  .cicd-header {
    padding: 10px;
  }

  .cicd-header h2 {
    font-size: 24px;
  }

  .cicd-header p {
    font-size: 12px;
  }

  .cicd-signals,
  .cicd-service-layer,
  .cicd-grid dl,
  .cicd-modal-grid {
    grid-template-columns: 1fr;
  }

  .cicd-wall text {
    font-size: 10px;
  }
}