/* Compact project overview. The signal travel is decorative and independent of firmware. */
.lab-banner {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  padding: 14px clamp(16px, 2.5vw, 36px);
  color: #eaf1f8;
  border: 1px solid #29445e;
  border-radius: 12px;
  background-color: #14283d;
  background-image: linear-gradient(95deg, #13283c 12%, transparent 70%),
    radial-gradient(ellipse at 73% 78%, #547b9a55, transparent 54%),
    radial-gradient(#8caaca60 .7px, transparent .9px);
  background-size: auto, auto, 12px 12px;
}
.lab-banner-info { min-width: 0; width: 51%; }
.lab-banner h2 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -.055em;
  font-weight: 700;
  line-height: 1.01;
  color: #f4f8fc;
}
.lab-banner h2 span { color: #a9cbe5; font-weight: 420; }
.lab-banner-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 6px 0 12px;
  font: 11px/1.4 var(--mono);
  color: #c9d8e5;
}
.lab-banner-meta svg { width: 13px; height: 13px; color: #a7bbcb; }
#heroProject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lab-banner-lang { flex: none; border-left: 1px solid #546d85; padding-left: 8px; color: #b3c9dd; }
.lab-banner-actions { display: flex; align-items: center; gap: 9px; }
.lab-banner-actions button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid transparent;
  border-radius: 5px;
}
.lab-banner-actions svg { width: 14px; height: 14px; }
.lab-banner #benchBtn { color: #18324a; background: #c2dcf0; }
.lab-banner #benchBtn:hover { background: #e2effa; }
.lab-banner #heroChip { color: #dce8f1; background: #203a52; border-color: #53718c; }
.lab-banner #heroChip:hover { background: #2d4c68; }
.lab-banner-actions button:focus-visible { outline: 2px solid #cce8fc; }
.lab-banner-board {
  position: absolute;
  z-index: -1;
  inset: 0 -1% 0 auto;
  width: 55%;
  display: grid;
  align-items: center;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 11%, black 93%, transparent);
}
.lab-banner-board span { display: block; width: 100%; height: 100%; }
.lab-banner-board svg { display: block; width: 100%; height: 100%; }
.bus-lines, .bus-signals { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.bus-lines { stroke: #6088a6; stroke-width: 1.05; }
.bus-vias { fill: #1b344b; stroke: #8aa8be; stroke-width: 1.15; }
.bus-pulse { stroke: #c5e6ff; stroke-width: 2; stroke-dasharray: 9 91; animation: banner-bus-travel 5.4s linear infinite; }
.bus-pulse-1 { animation-delay: -2.7s; stroke: #85b6dc; }
.bus-pulse-2 { animation-delay: -4.2s; stroke: #9ebad1; }
.bus-pulse-3 { animation-delay: -1.1s; }
@keyframes banner-bus-travel { from {stroke-dashoffset: 0} to {stroke-dashoffset: -100} }
@media (prefers-reduced-motion: reduce) {
  .bus-pulse { animation: none; stroke-dashoffset: -24; }
  .bus-pulse-1, .bus-pulse-3 { stroke-dashoffset: -57; }
}
@media (max-width: 900px) {
  .lab-banner-info { width: 60%; }
  .lab-banner-board { width: 48%; right: -1%; }
}
@media (max-width: 550px) {
  .lab-banner { min-height: 126px; padding: 14px; }
  .lab-banner-info { width: 72%; }
  .lab-banner-meta { margin: 6px 0 11px; }
  .lab-banner-lang { display: none; }
  .lab-banner-board { width: 35%; mask-image: linear-gradient(90deg, transparent, black 20%); }
  .lab-banner-board svg { width: 390px; max-width: none; position: absolute; left: 50%; transform: translateX(-50%); }
  .lab-banner-actions { gap: 6px; }
  .lab-banner-actions button { min-height: 31px; padding: 4px 8px; white-space: nowrap; }
}
@media (max-width: 370px) {
  .lab-banner-info { width: 80%; }
  .lab-banner-board { width: 28%; }
}