/* Development Lab (/lab/): the engineering change log as a Signal timeline. The page's own content carries a small
   inline stylesheet; these rules are scoped one level higher so they win without editing the content. The line is drawn
   per item (node to next node), so wrapped headings or long cards can never push it through the text. */

body .ev-lab-updates::before { display: none; }

body .ev-lab-updates { --ev-sig-red: #e12635; --ev-sig-green: #3bd67f; }
body .ev-lab-updates > h2 { position: relative; }
body .ev-lab-updates > h2::after { content: ""; display: block; width: min(320px, 70%); height: 26px; margin-top: 14px; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 26'%3E%3Cpath d='M0 13h70l8-9 9 18 9-22 9 26 8-13h60l6-6 7 12 6-6h118' fill='none' stroke='%23e12635' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }

body .ev-lab-updates .ev-fixline { position: relative; margin: 28px 0 0; padding-left: 64px; }

/* Each phase's colour moves from EV red to Signal green as the work progresses. */
body .ev-lab-updates .ev-fixitem { --c: var(--ev-sig-red); --next: var(--ev-sig-red); position: relative; margin: 0 0 18px; padding: 22px 24px; border: 1px solid #262a30; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), #0c0e11; transition: border-color .2s, transform .2s, box-shadow .2s; }
body .ev-lab-updates .ev-fixitem:nth-child(2) { --c: #e33a3f; --next: #d9524a; }
body .ev-lab-updates .ev-fixitem:nth-child(1) { --next: #e33a3f; }
body .ev-lab-updates .ev-fixitem:nth-child(3) { --c: #d9524a; --next: #c06a55; }
body .ev-lab-updates .ev-fixitem:nth-child(4) { --c: #c06a55; --next: #a08260; }
body .ev-lab-updates .ev-fixitem:nth-child(5) { --c: #a08260; --next: #7a9c68; }
body .ev-lab-updates .ev-fixitem:nth-child(6) { --c: #7a9c68; --next: #58b671; }
body .ev-lab-updates .ev-fixitem:nth-child(7) { --c: #58b671; --next: var(--ev-sig-green); }
body .ev-lab-updates .ev-fixitem:nth-child(n+8) { --c: var(--ev-sig-green); --next: var(--ev-sig-green); }
body .ev-lab-updates .ev-fixitem:hover { border-color: color-mix(in srgb, var(--c) 55%, #262a30); transform: translateX(3px); box-shadow: -6px 0 24px -12px var(--c); }

/* Node: a ring in the phase colour with a lit core. */
body .ev-lab-updates .ev-fixitem::before { content: ""; position: absolute; z-index: 2; left: -52px; top: 24px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c); background: radial-gradient(circle, var(--c) 0 3px, #0b0c0e 4px); box-shadow: 0 0 0 5px #111317, 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }

/* Connector to the next node, with a signal pulse travelling down it. */
body .ev-lab-updates .ev-fixitem::after { content: ""; position: absolute; z-index: 1; left: -43px; top: 44px; bottom: -42px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--c), var(--next)); }
body .ev-lab-updates .ev-fixitem:last-child::after { display: none; }
body .ev-lab-updates .ev-fixitem > :first-child::before { content: ""; position: absolute; z-index: 1; left: -45px; top: 44px; width: 6px; height: 22px; border-radius: 6px; background: linear-gradient(transparent, #fff, transparent); opacity: 0; filter: drop-shadow(0 0 6px var(--next)); animation: ev-sig-travel 3.2s ease-in infinite; animation-delay: calc(var(--i, 0) * .4s); }
body .ev-lab-updates .ev-fixitem:last-child > :first-child::before { display: none; }
body .ev-lab-updates .ev-fixitem:nth-child(2) { --i: 1; } body .ev-lab-updates .ev-fixitem:nth-child(3) { --i: 2; } body .ev-lab-updates .ev-fixitem:nth-child(4) { --i: 3; }
body .ev-lab-updates .ev-fixitem:nth-child(5) { --i: 4; } body .ev-lab-updates .ev-fixitem:nth-child(6) { --i: 5; } body .ev-lab-updates .ev-fixitem:nth-child(7) { --i: 6; }
@keyframes ev-sig-travel { 0% { top: 44px; opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { top: calc(100% + 18px); opacity: 0; } }

/* Phase label as a pill in the phase colour; the latest phase is marked Now with a live dot. */
body .ev-lab-updates .ev-fixmeta { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 10px !important; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, transparent); color: color-mix(in srgb, var(--c) 55%, #f2f2f2) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .12em; }
body .ev-lab-updates .ev-fixitem:last-child .ev-fixmeta::after { content: "Now"; display: inline-flex; align-items: center; padding: 2px 8px 2px 18px; border-radius: 999px; background: color-mix(in srgb, var(--ev-sig-green) 18%, transparent); color: #b6f5cf; letter-spacing: .08em;
  background-image: radial-gradient(circle at 9px 50%, var(--ev-sig-green) 0 3px, transparent 4px); }
body .ev-lab-updates .ev-fixitem:last-child { border-color: color-mix(in srgb, var(--ev-sig-green) 35%, #262a30); }
body .ev-lab-updates .ev-fixitem:last-child::before { animation: ev-sig-live 2s ease-out infinite; }
@keyframes ev-sig-live { 0% { box-shadow: 0 0 0 5px #111317, 0 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 5px #111317, 0 0 0 16px transparent; } }

body .ev-lab-updates .ev-fixitem h3 { margin: 0 0 8px; color: #f7f5f1; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.3; }
body .ev-lab-updates .ev-fixitem p { color: #c3c6cc; line-height: 1.6; }
body .ev-lab-updates .ev-fixitem p:last-child { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #2a2e34; color: #9da1a8; font-size: .92em; }
body .ev-lab-updates .ev-fixitem p:last-child strong { color: color-mix(in srgb, var(--c) 50%, #f2f2f2); }

@media (max-width: 760px) {
  body .ev-lab-updates .ev-fixline { padding-left: 36px; }
  body .ev-lab-updates .ev-fixitem { padding: 18px 16px; }
  body .ev-lab-updates .ev-fixitem::before { left: -34px; width: 16px; height: 16px; top: 22px; }
  body .ev-lab-updates .ev-fixitem::after { left: -27px; top: 38px; }
  body .ev-lab-updates .ev-fixitem > :first-child::before { left: -29px; }
  body .ev-lab-updates .ev-fixitem:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body .ev-lab-updates .ev-fixitem > :first-child::before { display: none; }
  body .ev-lab-updates .ev-fixitem:last-child::before { animation: none; }
  body .ev-lab-updates .ev-fixitem { transition: none; }
  body .ev-lab-updates .ev-fixitem:hover { transform: none; }
}

/* Lab header (page-lab.php): the shared breakout header replaces the content's own intro panel; its jump links sit
   under the header as a quiet chip row. */
.ev-lab-page__content.has-ev-header .ev-lab-hero { display: none; }
.ev-lab-page__content.has-ev-header .ev-lab { max-width: none; margin-top: 0; padding: 8px 0 80px; border: 0; }
@media (min-width: 1101px) { .ev-platform-hero--lab { --ev-mascot-vis: 150px; } }
/* Phones and tablets: the perched gorilla fills the space above the panel (main padding + the 52px header gap). */
@media (max-width: 1100px) { .ev-edhub__hero.ev-platform-hero--lab { --ev-mascot-vis: 104px; } }
.ev-lab-page__content { max-width: none; }
.ev-lab-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.ev-lab-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #2a2e34; border-radius: 999px; background: #0c0e11; color: #e9ebee; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.ev-lab-jump a:hover, .ev-lab-jump a:focus-visible { border-color: #3bd67f; color: #fff; }
@media (max-width: 640px) { .ev-lab-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 0 4px 2px; } .ev-lab-jump a { flex: none; } }