/* Penton Systems | Founder: Scott Penton | Orlando, Florida. Designed and engineered under the direction of Scott Penton. Copyright (c) 2026 Scott Penton / Penton Systems. */
/* Experience C: The Living Laboratory */

/* ---------- hero art: isometric blueprint of the bay ---------- */
.lab-hero-art{display:flex;justify-content:flex-end;align-items:center;padding-right:var(--pad);opacity:.85}
.lab-hero-art svg{width:min(62vw,820px);height:auto;margin-top:6vh}
.lab-hero-art .iso{fill:none;stroke:rgba(122,184,255,.32);stroke-width:1.2;stroke-linejoin:round}
.lab-hero-art .iso .dash{stroke-dasharray:4 5;stroke:rgba(122,184,255,.5)}
.lab-hero-art .led{fill:var(--teal);stroke:none}.lab-hero-art .led.b{fill:var(--blue-hi)}
html[data-motion=on] .lab-hero-art .led{animation:labblink 2.4s steps(2) infinite}
html[data-motion=on] .lab-hero-art .led.b{animation-duration:1.1s}
html[data-motion=on] .lab-hero-art .iso .dash{animation:labdash 6s linear infinite}
@keyframes labblink{50%{opacity:.25}}
@keyframes labdash{to{stroke-dashoffset:-90}}
@media (max-width:960px){.lab-hero-art{opacity:.35;justify-content:center;padding:0}.lab-hero-art svg{width:120vw}}

/* ---------- experience grid ---------- */
.lab-xp{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,410px);align-items:stretch;margin-top:8px}
.lab-instrument{min-width:0}
.instrument .lab-stage{aspect-ratio:16/10;outline:none;background:radial-gradient(90% 80% at 40% 30%,rgba(24,40,68,.45),rgba(4,7,13,1) 70%)}
.lab-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--blue-hi)}
.lab-ibar-r{display:flex;gap:8px;align-items:center}
.lab-ifoot{gap:8px}
.lab-ifoot .btn.sm{min-height:34px}
.lab-ifoot [data-lab-tour][aria-pressed=true]{border-color:var(--teal);color:var(--teal)}
.lab-ifoot-note{margin-left:auto;font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;color:var(--fg-3)}
.lab-hint{position:absolute;left:14px;bottom:12px;z-index:3;font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);background:rgba(2,4,9,.6);padding:7px 10px;border:1px solid var(--line);pointer-events:none;transition:opacity .8s var(--ease)}
.lab-hint.gone{opacity:0}

/* pins over the 3D view */
.lab-pins{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lab-pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;margin:-12px 0 0 -12px;pointer-events:auto;cursor:pointer;white-space:nowrap;will-change:transform}
.lab-pin b{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(122,184,255,.7);background:rgba(4,8,16,.78);color:var(--blue-hi);font:600 .62rem/1 var(--mono);border-radius:50%;transition:background .3s,color .3s,box-shadow .3s}
.lab-pin i{font:500 .68rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:rgba(4,8,16,.82);border:1px solid var(--line-2);padding:5px 8px;opacity:0;transform:translateX(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lab-pin:hover i,.lab-pin.hover i,.lab-pin.on i{opacity:1;transform:none}
.lab-pin.on b,.lab-pin:hover b,.lab-pin.hover b{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(47,128,255,.25)}

/* designed floor-plan fallback (no WebGL) */
.lab-plan{padding:18px}
.lab-plan svg{width:100%;height:100%}
.lab-plan .room{fill:rgba(10,18,32,.6);stroke:var(--line-2)}
.lab-plan .rack,.lab-plan .bench{fill:rgba(47,128,255,.08);stroke:rgba(122,184,255,.5)}
.lab-plan .pins circle{fill:#0a1220;stroke:var(--blue-hi);stroke-width:1.5}
.lab-plan .pins text{fill:var(--fg);font:600 11px var(--mono);text-anchor:middle}
.lab-plan .pins g.on circle,.lab-plan .pins g:hover circle{fill:var(--blue)}
.lab-plan .cap{fill:var(--fg-3);font:500 11px var(--mono);text-anchor:middle;letter-spacing:.12em;text-transform:uppercase}

/* ---------- side panel ---------- */
.lab-side{display:flex;flex-direction:column;height:0;min-height:100%;border:1px solid var(--line);border-left:0;background:linear-gradient(180deg,rgba(13,22,38,.92),rgba(6,10,20,.96))}
.lab-list{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-bottom:1px solid var(--line);flex:none}
.lab-list button{width:100%;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:8px;min-height:38px;padding:6px 8px;border:1px solid transparent;background:transparent;color:var(--fg-2);text-align:left;cursor:pointer;font:500 .8rem/1.2 var(--sans);transition:background .25s,border-color .25s,color .25s}
.lab-list button .n{font:600 .66rem/1 var(--mono);color:var(--blue-hi)}
.lab-list button .tag{display:none}
.lab-list button:hover{background:rgba(47,128,255,.08);color:#fff}
.lab-list button[aria-pressed=true]{border-color:rgba(122,184,255,.55);background:rgba(47,128,255,.14);color:#fff}
.lab-detail{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 24px;outline:none;scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
.ld-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.ld-n{font:600 1.5rem/1 var(--mono);color:var(--blue-hi);padding-top:2px}
.ld-head h3{margin:0 0 8px;font-size:1.3rem;font-stretch:112%}
.ld-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ld-sum{color:var(--fg-2);font-size:.95rem;margin:0 0 16px}
.ld-h{font:600 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:20px 0 10px}
.ld-spec{font-size:.86rem}.ld-spec th{width:40%}
.ld-exp{list-style:none;margin:0;padding:0}
.ld-exp li{position:relative;padding:6px 0 6px 18px;color:var(--fg-2);font-size:.9rem;border-bottom:1px solid var(--line)}
.ld-exp li:before{content:"";position:absolute;left:2px;top:13px;width:7px;height:1px;background:var(--blue-hi)}
.ld-seq{list-style:none;margin:0;padding:0 0 0 16px;border-left:1px solid var(--line-2)}
.ld-seq li{position:relative;padding:0 0 12px 12px;display:grid;gap:2px;font-size:.88rem}
.ld-seq li:before{content:"";position:absolute;left:-21px;top:4px;width:9px;height:9px;border-radius:50%;border:1px solid var(--blue-hi);background:var(--ink-1)}
.ld-seq li:last-child:before{background:var(--blue-hi)}
.ld-seq b{color:var(--fg);font-weight:600}.ld-seq span{color:var(--fg-2)}
.ld-private{margin:16px 0 0;padding:10px 12px;border-left:2px solid var(--violet);background:rgba(138,114,255,.07);font-size:.84rem;color:var(--fg-2)}
.ld-private b{color:var(--fg)}
.ld-links{display:grid;gap:10px;margin-top:18px}
.ld-legend{font-size:.86rem}.ld-legend dt{padding-right:12px}

/* ---------- fleet heartbeat ---------- */
.lab-fleet{margin-top:28px}
.lab-fleet .readouts{grid-template-columns:repeat(3,minmax(0,1fr))}
.lab-fleet-groups .s{display:grid;gap:6px;margin-top:4px}
.lab-fleet-groups .fg{font-size:.86rem;color:var(--fg-2)}.lab-fleet-groups .fg b{color:var(--fg);font-weight:600;margin-right:4px}
.lab-fleet .note{margin-top:12px}
.lab-static{margin-top:28px}

/* ---------- chapters ---------- */
.lab-proof th[scope=col]:nth-child(1){width:20%}.lab-proof th[scope=col]:nth-child(2){width:38%}.lab-proof th[scope=col]:nth-child(3){width:14%}
.lab-proof tbody th{color:var(--fg);font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1100px){
 .lab-xp{grid-template-columns:minmax(0,1fr)}
 .lab-side{height:auto;min-height:0;border-left:1px solid var(--line);border-top:0}
 .lab-detail{overflow:visible}
 .instrument .lab-stage{aspect-ratio:4/3}
 .lab-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
 .instrument .lab-stage{aspect-ratio:1/1}
 .lab-list{grid-template-columns:1fr 1fr}
 .lab-pin i{display:none}
 .lab-pin b{width:22px;height:22px}
 .lab-fleet .readouts{grid-template-columns:minmax(0,1fr)}
 .lab-ifoot-note{margin-left:0;flex-basis:100%}
 .lab-proof{min-width:640px}
}
@media (max-width:340px){.lab-list{grid-template-columns:minmax(0,1fr)}}