/* Atlas lab experiments. Every feature is gated by html.lab-N (set by lab.js). */
html:not(.lab-1) .lab-f1,html:not(.lab-2) .lab-f2,html:not(.lab-3) .lab-f3,html:not(.lab-4) .lab-f4,
html:not(.lab-5) .lab-f5,html:not(.lab-7) .lab-f7,html:not(.lab-8) .lab-f8{display:none!important}
html:not(.lab-1) .lab-w,html:not(.lab-1) .lab-fly,html:not(.lab-6) .lab-s{display:none}
.lab-ex{display:inline-block;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;padding:4px 7px;border-radius:999px;border:1px solid color-mix(in oklab,currentColor 30%,transparent);opacity:.85}
.lab-note{font-size:12px;opacity:.72}
.lab-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px}.lab-head b{font-size:15px;font-weight:600}
[class^=lab-] button,[class*=" lab-"] button{font:inherit;color:inherit;cursor:pointer}
[class^=lab-] button:focus-visible,.lab-car:focus-visible,.lab-log:focus-visible,.lab-rng:focus-visible{outline:2px solid var(--ac-blue);outline-offset:2px}
.lab-svg-g svg,.lab-pchips svg,.lab-lane h4 svg,.lab-pr svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}

/* 1 pick a request */
.lab-req{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;max-width:600px;color:var(--t-fg-c5c8db,#c5c8db)}
.lab-req-l{font-size:13px;margin-right:2px}
.lab-req>button{padding:7px 13px;border-radius:999px;font-size:13px;background:color-mix(in oklab,currentColor 6%,transparent);border:1px solid color-mix(in oklab,currentColor 26%,transparent);transition:border-color .2s,background .2s}
.lab-req>button:hover{border-color:currentColor}.lab-req>button[aria-pressed=true]{border-color:var(--ac-green);background:color-mix(in oklab,var(--ac-green) 16%,transparent)}
.lab-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;width:100%}
.lab-steps:empty{display:none}
.lab-steps li{font-size:12px;padding:4px 9px;border-radius:6px;border-left:3px solid var(--rc);background:color-mix(in oklab,var(--rc) 10%,transparent);opacity:.25;transform:translateY(4px);transition:opacity .35s,transform .35s}
.lab-steps li.on{opacity:1;transform:none}
.lab-w{fill:none;stroke:var(--rc);stroke-width:2;opacity:0;transition:opacity .4s}
.lab-w.on{opacity:1;filter:drop-shadow(0 0 6px var(--rc))}
.lab-fly{fill:none;stroke:var(--rc);stroke-width:2;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1);filter:drop-shadow(0 0 4px var(--rc))}

/* 6 scroll light-up */
.lab-s{fill:color-mix(in oklab,var(--rc) 14%,transparent);stroke:var(--rc);stroke-width:1.4;opacity:0}
@supports (animation-timeline:scroll()){
 @media (prefers-reduced-motion:no-preference){.lab-s{animation:lab-lit linear both;animation-timeline:scroll(root);animation-range:calc(40px + var(--i)*55px) calc(110px + var(--i)*55px)}}
}
@keyframes lab-lit{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lab-s{opacity:.9}}

/* 8 spotlight */
.lab-spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;
 background-image:linear-gradient(color-mix(in oklab,var(--ac-blue) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--ac-blue) 55%,transparent) 1px,transparent 1px);background-size:40px 40px;
 -webkit-mask:radial-gradient(220px circle at var(--x,50%) var(--y,50%),#000,transparent 70%);mask:radial-gradient(220px circle at var(--x,50%) var(--y,50%),#000,transparent 70%)}
.lab-spot.on{opacity:.7}
.lab-tilt{transition:transform .12s ease-out;will-change:transform}
.mv-col,.mv-card{transition:transform .3s ease}

/* 2 providers */
.lab-prov,.lab-strip{margin-top:28px;padding:18px;border-radius:14px;border:1px solid color-mix(in oklab,currentColor 14%,transparent);background:color-mix(in oklab,currentColor 3%,transparent)}
.lab-pchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lab-pchips button{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;font-size:13px;background:color-mix(in oklab,var(--ac-green) 12%,transparent);border:1px solid var(--ac-green)}
.lab-pchips button[aria-pressed=false]{background:none;border-color:color-mix(in oklab,currentColor 28%,transparent);opacity:.6;text-decoration:line-through}
.lab-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lab-lane{border-radius:10px;padding:10px;min-height:120px;background:color-mix(in oklab,currentColor 4%,transparent);transition:opacity .3s}
.lab-lane.off{opacity:.5;background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in oklab,currentColor 5%,transparent) 8px 16px)}
.lab-lane h4{margin:0 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center}
.lab-lc{display:flex;flex-direction:column;gap:6px}
.lab-card{padding:8px 10px;border-radius:8px;border-left:3px solid var(--ac-green);background:color-mix(in oklab,currentColor 6%,transparent);font-size:13px;display:flex;flex-direction:column;gap:2px;transition:border-color .3s,background .3s}
.lab-card small{font-size:11px;opacity:.7}
.lab-card.wait{border-left-color:var(--ac-amber);background:color-mix(in oklab,var(--ac-amber) 12%,transparent)}.lab-card.wait small{color:var(--ac-amber);opacity:1}

/* 4 strip */
.lab-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);touch-action:pan-y;user-select:none;cursor:grab;padding-top:4px}
.lab-track::before,.lab-fill{content:"";position:absolute;left:10%;right:10%;top:17px;height:2px;background:color-mix(in oklab,currentColor 18%,transparent)}
.lab-fill{right:auto;width:calc(80% * var(--p,0));background:var(--ac-green);transition:width .35s ease;z-index:1}
.lab-st{all:unset;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:0 4px 4px;border-radius:8px}
.lab-st:focus-visible{outline:2px solid var(--ac-blue)}
.lab-st i{width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in oklab,currentColor 35%,transparent);background:var(--lab-bg,#0b0f2a);display:grid;place-items:center;font-style:normal;font-size:13px;transition:all .3s}
html[data-theme=dark] .lab-st i{--lab-bg:#000}html[data-theme=light] .lab-st i{--lab-bg:#f8f7f4}
.lab-st.here i{border-color:var(--ac-blue);box-shadow:0 0 0 4px color-mix(in oklab,var(--ac-blue) 22%,transparent)}
.lab-st.pass i{border-color:var(--ac-green);background:var(--ac-green)}.lab-st.pass i::after{content:"✓";color:#04140a;animation:lab-pop .3s ease}
@keyframes lab-pop{from{transform:scale(.3)}}
.lab-rng{width:100%;margin-top:10px;accent-color:var(--ac-green)}

/* 5 carousel */
html.lab-5 .lab-car{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:0;scrollbar-width:none;anchor-name:--labcar}
html.lab-5 .lab-car::-webkit-scrollbar{display:none}
html.lab-5 .lab-car>.pillar{flex:0 0 44%;scroll-snap-align:start}
@media (max-width:760px){html.lab-5 .lab-car>.pillar{flex-basis:86%}}
@media (prefers-reduced-motion:reduce){html.lab-5 .lab-car{scroll-behavior:auto}}
html.lab-5.lab-sm .lab-car{scroll-marker-group:after}
html.lab-5.lab-sm .lab-car>.pillar::scroll-marker{content:attr(data-name);font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in oklab,currentColor 25%,transparent);color:inherit;text-decoration:none}
html.lab-5.lab-sm .lab-car>.pillar::scroll-marker:target-current{border-color:var(--ac-blue);background:color-mix(in oklab,var(--ac-blue) 14%,transparent)}
html.lab-5.lab-sm .lab-car::scroll-marker-group{display:flex;gap:8px;justify-content:center;margin-top:16px}
html.lab-5.lab-sm .lab-car::scroll-button(*){font-size:15px;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in oklab,currentColor 30%,transparent);background:var(--t-bg-vpaper,var(--paper,#f4f1ec));color:inherit;cursor:pointer;position:absolute;position-anchor:--labcar;top:anchor(bottom);margin-top:14px}
html.lab-5.lab-sm .lab-car::scroll-button(left){content:"←"/"Previous card";left:anchor(left)}
html.lab-5.lab-sm .lab-car::scroll-button(right){content:"→"/"Next card";right:anchor(right)}
html.lab-5.lab-sm .lab-car::scroll-button(*):disabled{opacity:.35;cursor:default}
.lab-cnav{display:flex;justify-content:center;gap:8px;margin-top:16px}
.lab-cnav button{padding:6px 12px;border-radius:999px;background:none;border:1px solid color-mix(in oklab,currentColor 25%,transparent);font-size:13px}
.lab-cnav .lab-mk[aria-current=true]{border-color:var(--ac-blue);background:color-mix(in oklab,var(--ac-blue) 14%,transparent)}
.lab-vis{margin-bottom:10px}
.lv{width:72px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-opacity:.45}
.lv .m{fill:var(--ac-blue);stroke:none}
.lv-ctx .m{animation:lab-ctx 2s ease-in-out infinite}@keyframes lab-ctx{50%{transform:translateX(44px)}}
.lv-auth .m{fill:var(--ac-amber);animation:lab-auth 2s ease-in-out infinite}.lv-auth .g{stroke:var(--ac-amber);stroke-opacity:1;stroke-width:2}
@keyframes lab-auth{45%,60%{transform:translateX(12px)}}
.lv-ev .c{stroke:var(--ac-green);stroke-opacity:1;stroke-width:2.4;stroke-dasharray:22;animation:lab-ev 2s ease infinite}@keyframes lab-ev{0%{stroke-dashoffset:22}45%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.lv *{animation:none!important}.lv-ctx .m{transform:translateX(44px)}}

/* 7 log */
.lab-log{margin-top:28px;border-radius:12px;border:1px solid color-mix(in oklab,currentColor 16%,transparent);background:color-mix(in oklab,#000 35%,transparent);font:13px/1.7 ui-monospace,Menlo,monospace;overflow:hidden}
html[data-theme=light] .lab-log{background:color-mix(in oklab,#fff 60%,transparent)}
.lab-lh{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid color-mix(in oklab,currentColor 12%,transparent);font-family:system-ui,sans-serif}
.lab-lh b{font-size:13px}.lab-lh .lab-lp{margin-left:auto;padding:4px 12px;border-radius:999px;background:none;border:1px solid color-mix(in oklab,currentColor 30%,transparent);font-size:12px}
.lab-dots{display:flex;gap:5px}.lab-dots i{width:9px;height:9px;border-radius:50%;background:var(--ac-red)}.lab-dots i+i{background:var(--ac-amber)}.lab-dots i+i+i{background:var(--ac-green)}
.lab-ll{list-style:none;margin:0;padding:12px 14px;min-height:calc(9 * 1.7em + 24px)}
.lab-ll li{display:flex;gap:14px}.lab-ll .k{width:44px;flex:none;opacity:.6}
.lab-ll .pass .k,.lab-ll .pass .t{color:var(--ac-green);opacity:1}.lab-ll .wait .k,.lab-ll .wait .t{color:var(--ac-amber);opacity:1}.lab-ll .fail .k,.lab-ll .fail .t{color:var(--ac-red);opacity:1}
.lab-ll .plan .k{color:var(--ac-blue);opacity:1}.lab-ll .build .k{color:var(--ac-teal);opacity:1}
.lab-ll .typing .t::after{content:"▍";animation:lab-blink 1s steps(1) infinite}@keyframes lab-blink{50%{opacity:0}}

@media (max-width:760px){
 .lab-lanes{grid-template-columns:repeat(2,1fr)}.lab-prs{grid-template-columns:1fr}.lab-st{font-size:11px}
 .lab-ll .k{width:38px}.lab-log{font-size:12px}
}

/* follow-up: zoom tiers, probe, markers, focus */
#demo .lab-probe,#demo .lab-probe *{transition:none!important;animation-play-state:paused!important}
html.lab-5.lab-sm .lab-car::scroll-marker-group{display:none}html.lab-sm .lab-cnav [data-d]{display:none}
.lab-cnav .lab-mk[aria-current=true]{border-color:var(--ac-blue);background:color-mix(in oklab,var(--ac-blue) 14%,transparent)}
@media (min-width:1600px){.lab-req,.lab-prov,.lab-strip,.lab-log,.lab-cnav{zoom:1.3}}
@media (min-width:2400px){.lab-req,.lab-prov,.lab-strip,.lab-log,.lab-cnav{zoom:1.15}}
html.lab-5.lab-sm .lab-car::scroll-button(*):focus-visible{outline:2px solid var(--ac-blue);outline-offset:2px}

/* fb8: problem cards static row, larger loops replacing the symbol */
html.lab-5 .lab-anim .pillar-symbol{display:none}
.lab-anim .lab-vis{margin:20px 0 22px;height:48px;display:flex;align-items:center}
.lab-anim .lv{width:132px;height:52px;stroke-width:1.6;stroke-opacity:.55}
.lab-anim .pillar:nth-child(1) .lv .m{fill:var(--ac-blue)}
@media (max-width:800px){.lab-anim .lab-vis{margin:14px 0 16px}}