/* Lab detail pages and the modal that shows them. Tokens and fonts come from site.css. */

/* detail layout */
.lab-detail{--c:var(--blue);max-width:1100px;margin:0 auto;padding:72px 32px 72px}
.lab-detail>section{margin-top:88px}
.lab-detail h2{font-size:clamp(24px,3vw,32px)}
.ld-head{display:grid;justify-items:start;gap:0}
.ld-eyebrow{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.ld-eyebrow:before{content:"";width:28px;height:2px;background:var(--grad)}
.ld-title{font:800 clamp(36px,6vw,68px)/1.04 var(--display);font-stretch:125%;letter-spacing:-.025em}
.ld-status{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font:500 12px/1 var(--mono);color:var(--dim);border:1px solid var(--hair);border-radius:999px;padding:7px 12px;white-space:nowrap}
.ld-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.ld-lede{max-width:700px;margin-top:22px;color:var(--dim);font-size:clamp(17px,2vw,20px);line-height:1.55}

/* mockups */
.lab-detail .ld-mocks{display:grid;gap:64px;margin-top:56px;justify-items:center}
.ld-mock{position:relative;display:grid;grid-template-rows:auto 1fr auto;width:100%;max-width:980px;min-width:0}
.ld-mock .frame-body{min-width:0;overflow:hidden;container-type:inline-size;background:var(--surface);border:1px solid var(--hair);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ld-mock figcaption{margin-top:16px;text-align:center;font:400 13px/1.5 var(--mono);color:var(--faint-t);text-wrap:balance;max-width:72ch;margin-inline:auto}
.ld-soon{padding:80px 24px;text-align:center;font:500 14px/1.4 var(--mono);color:var(--faint-t)}

/* browser: bar with dots and an address pill */
.ld-mock[data-frame=browser]:before{content:attr(data-url);height:44px;padding:0 64px 0 84px;display:block;text-align:center;
font:400 12px/44px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:radial-gradient(circle 5px at 22px 50%,#FF6B5E 98%,transparent) no-repeat,radial-gradient(circle 5px at 42px 50%,#F5C04A 98%,transparent) no-repeat,radial-gradient(circle 5px at 62px 50%,#3DD68C 98%,transparent) no-repeat,
radial-gradient(circle 13px at 97px 50%,var(--bg) 98%,transparent) no-repeat,radial-gradient(circle 13px at calc(100% - 29px) 50%,var(--bg) 98%,transparent) no-repeat,linear-gradient(var(--bg),var(--bg)) no-repeat 97px 50%/calc(100% - 126px) 26px,var(--raised);
border:1px solid var(--hair);border-bottom:0;border-radius:14px 14px 0 0}
.ld-mock[data-frame=browser] .frame-body{border-radius:0 0 14px 14px}

/* terminal: title bar with dots */
.ld-mock[data-frame=terminal]:before{content:attr(data-title);height:38px;display:flex;align-items:center;justify-content:center;padding:0 80px;
font:500 12px/1 var(--mono);color:var(--faint-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:radial-gradient(circle 5px at 20px 50%,#FF6B5E 98%,transparent) no-repeat,radial-gradient(circle 5px at 40px 50%,#F5C04A 98%,transparent) no-repeat,radial-gradient(circle 5px at 60px 50%,#3DD68C 98%,transparent) no-repeat,#121B27;
border:1px solid var(--hair);border-bottom:0;border-radius:12px 12px 0 0}
.ld-mock[data-frame=terminal] .frame-body{background:#080C12;border-radius:0 0 12px 12px;padding:18px 22px;font:400 13px/1.7 var(--mono);color:var(--text)}

/* popover: macOS style, arrow on top */
.ld-mock[data-frame=popover]{max-width:420px;padding-top:12px}
.ld-mock[data-frame=popover]:before{content:"";position:absolute;top:5px;left:50%;width:16px;height:16px;margin-left:-8px;transform:rotate(45deg);background:var(--raised);border:1px solid var(--hair);border-right:0;border-bottom:0;border-radius:3px 0 0 0;z-index:1}
.ld-mock[data-frame=popover] .frame-body{background:var(--raised);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* phone */
.ld-mock[data-frame=phone]{max-width:340px}
.ld-mock[data-frame=phone]:before{content:"";position:absolute;top:12px;left:50%;width:92px;height:24px;margin-left:-46px;border-radius:999px;background:#05080C;z-index:1}
.ld-mock[data-frame=phone] .frame-body{aspect-ratio:9/18;border:10px solid #05080C;border-radius:44px;outline:1px solid var(--hair);padding-top:30px}

/* how it works */
.ld-how h2,.ld-stack h2,.ld-notes h2{margin-bottom:28px}
.ld-diagram{border:1px solid var(--hair);border-radius:16px;background:var(--surface);padding:clamp(16px,3vw,32px);margin-bottom:32px}
.ld-diagram svg{display:block;width:100%;height:auto;color:var(--dim);overflow:visible}
.ld-steps{list-style:none;counter-reset:s;display:grid;gap:14px}
.ld-steps li{counter-increment:s;position:relative;padding-left:46px;color:var(--dim);font-size:16px;line-height:1.55}
.ld-steps li:before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--c);border-radius:50%;color:var(--text);font:500 13px/1 var(--mono)}
.ld-steps b{color:var(--text);font-weight:600}

/* stack and decisions */
.ld-stack ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ld-stack li{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:18px 20px}
.ld-stack li b{display:flex;align-items:center;gap:9px;font:700 17px/1.25 var(--display);font-stretch:112%;margin-bottom:6px}
.ld-stack li b:before{content:"";width:9px;height:9px;background:var(--c)}
.ld-stack li span{color:var(--dim);font-size:14px;line-height:1.5}
.ld-notes ul{list-style:none;display:grid;gap:16px;max-width:760px}
.ld-notes li{position:relative;padding:2px 0 2px 22px;color:var(--dim);font-size:16px;line-height:1.6}
.ld-notes li:before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;background:var(--c)}
.ld-notes li b{color:var(--text);font-weight:600}

/* flowing connectors: a dim track, marching dashes and one travelling dot, all in the direction of the arrow */
.ld-flow-base{stroke-opacity:.4}
.ld-flow-dash{fill:none;stroke-dasharray:5 11;animation:ld-march 1.6s linear infinite}
svg.dia .ld-flow-dash{stroke-dasharray:3 8;animation-name:ld-march-s}
svg:not(.ld-on) .ld-flow-dash{animation-play-state:paused}
@keyframes ld-march{to{stroke-dashoffset:-16}}
@keyframes ld-march-s{to{stroke-dashoffset:-11}}

/* demo engine: fake pointer, click ripple, replay button and the helper states steps can switch on */
.ld-mock .frame-body.ld-live{position:relative}
.ld-ov{position:absolute;inset:0;z-index:5;pointer-events:none}
.ld-cur{position:absolute;left:0;top:0;width:17px;height:23px;opacity:0;transform-origin:0 0;transition:opacity .2s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));will-change:transform}
.ld-cur.on{opacity:1}
.ld-cur path{fill:#fff;stroke:#0A0F16;stroke-width:1.2;stroke-linejoin:round}
.ld-rip{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:2px solid var(--c,#3B82F6);background:rgba(59,130,246,.16);opacity:0;animation:ld-rip .45s ease-out forwards}
.ld-paused .ld-rip{animation-play-state:paused}
@keyframes ld-rip{from{transform:scale(.25);opacity:1}60%{opacity:.7}to{transform:scale(1.25);opacity:0}}
.ld-replay{pointer-events:auto;position:absolute;right:12px;bottom:12px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--hair);border-radius:50%;background:rgba(17,24,35,.92);color:var(--text);cursor:pointer;opacity:0;transition:opacity .2s,border-color .2s}
.ld-replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ld-mock:hover .ld-replay,.ld-replay:focus-visible{opacity:1}
.ld-replay:hover{border-color:var(--dim)}
@media (hover:none){.ld-replay{opacity:.7}}
.ld-hide{visibility:hidden}
.ld-gh{visibility:hidden}
.ld-caret{display:inline-block;position:relative;width:0;height:1em;vertical-align:-2px}
.ld-caret:after{content:"";position:absolute;left:1px;top:0;width:8px;height:1.1em;background:currentColor;opacity:.85}
.ld-press{filter:brightness(1.3);transform:scale(.95);transition:transform .12s}
.ld-sel{background:linear-gradient(var(--ld-sel,rgba(59,130,246,.35)),var(--ld-sel,rgba(59,130,246,.35))) 0 0 / calc(var(--sel,0) * 1%) 100% no-repeat}

/* prev and next */
.ld-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:0 auto;padding:0 32px 72px}
.ld-pager a{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--hair);border-radius:14px;background:var(--surface);transition:border-color .25s,background .25s}
.ld-pager a:hover{border-color:#34475C;background:var(--raised)}
.ld-pager span{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint-t)}
.ld-pager b{font:700 18px/1.25 var(--display);font-stretch:112%}
.ld-pager .ld-next{text-align:right;grid-column:2}
.ld-pager .ld-prev{grid-column:1}

/* standalone page bar */
.lab-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:12px max(16px,calc((100% - 1100px) / 2 + 32px));background:rgba(10,15,22,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.lab-bar a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;color:var(--dim);font:500 14px/1 var(--body);white-space:nowrap;transition:color .2s,background .2s}
.lab-bar a:hover{color:var(--text);background:var(--raised)}
.lab-bar .lb-back{color:var(--text);border:1px solid var(--hair);background:var(--surface)}
.lab-bar .lb-sp{flex:1}
.lab-bar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lab-page .lab-detail{padding-top:48px}

/* modal */
.lab-modal{position:fixed;inset:0;z-index:100;overflow:hidden;background:var(--bg) radial-gradient(circle,#1C2633 1px,transparent 1.2px) 0 0/24px 24px;view-transition-name:lab-card}
.lab-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.lab-close{position:absolute;top:18px;right:18px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;background:rgba(17,24,35,.85);color:var(--text);cursor:pointer;transition:border-color .2s,background .2s}
.lab-close:hover{border-color:var(--dim);background:var(--raised)}
.lab-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
html.lab-open{overflow:hidden}
html.lab-open.lab-gutter{scrollbar-gutter:stable}
.lab-modal .lab-detail{padding-top:84px}
.lab-modal .ld-head,.lab-modal .lab-detail>section,.lab-modal .ld-pager{transition:opacity .4s ease-out,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.lab-modal:not(.is-in) .ld-head,.lab-modal:not(.is-in) .lab-detail>section,.lab-modal:not(.is-in) .ld-pager{opacity:0;transform:translateY(26px);transition-delay:0s}
.lab-modal.is-swapping .lab-content{opacity:0;transition:opacity .15s}
.lab-content{transition:opacity .25s}
.lab-clone{position:fixed;z-index:101;margin:0;overflow:hidden;pointer-events:none;transition:none!important;transform:none!important}
::view-transition-group(lab-card){animation-duration:450ms;animation-timing-function:cubic-bezier(.2,.8,.2,1);overflow:clip}
::view-transition-old(lab-card),::view-transition-new(lab-card){height:100%;animation-duration:250ms}
.lab-card:focus-visible{border-radius:16px}

@media (prefers-reduced-motion:reduce){
.lab-modal .ld-head,.lab-modal .lab-detail>section,.lab-modal .ld-pager{transition:none;transform:none}
.lab-modal:not(.is-in) .ld-head,.lab-modal:not(.is-in) .lab-detail>section,.lab-modal:not(.is-in) .ld-pager{transform:none}
.lab-bar a,.ld-pager a{transition:none}
.ld-flow-dash{animation:none}
}

@media (max-width:700px){
.lab-detail{padding:56px 20px 56px}
.lab-modal .lab-detail{padding-top:80px}
.lab-detail>section{margin-top:64px}
.ld-pager{padding:0 20px 56px;grid-template-columns:1fr}
.ld-pager .ld-next,.ld-pager .ld-prev{grid-column:1;text-align:left}
.ld-mock[data-frame=browser]:before{padding:0 16px 0 84px;height:40px;line-height:40px}
.lab-bar a span.lb-t{display:none}
.lab-close{top:14px;right:14px}
}

@media (max-width:640px){
.ld-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to left,var(--surface) 30%,transparent) right/28px 100% no-repeat local,linear-gradient(to left,rgba(255,255,255,.09),transparent) right/28px 100% no-repeat scroll,var(--surface)}
.ld-diagram svg{min-width:620px}
.ld-diagram:focus-visible{outline:2px solid var(--c,currentColor);outline-offset:2px}
}