/* ═══════════════════════════════════════════════════════════════════════════
   labs.rzv.studio — labs.css
   Loads AFTER base.css (tokens, fonts, .pearl, .btn, .tilt …). Two halves:
   §1 the lab chrome + drawer (every lab page)   §2 the library index.
   The drawer's look is lab/lava's, verbatim: Silka Mono overline voice,
   hairline rows, 320px right-hand sheet that becomes a bottom sheet on phones.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ §1 LAB CHROME ═════════════════════════════════════════════════════ */
body.lab{margin:0;min-height:100vh;overflow:hidden;background:var(--bg);color:var(--text)}
body.lab #stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:right .32s cubic-bezier(.2,.7,0,1)}
@media (min-width:761px){ body.lab.open #stage{right:320px} }
body.lab #stage.scroll{display:block;overflow:auto;overscroll-behavior:contain}

.lab-brand{position:fixed;top:18px;left:18px;z-index:6;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap}
.lab-brand b{color:var(--text)}
.lab-brand .lab-brand-sep{opacity:.4;margin:0 2px}
.lab-brand .lab-brand-t{color:var(--text)}
.lab-brand:hover b{text-decoration:underline;text-underline-offset:3px}
body.lab #note{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:3;max-width:min(70vw,560px);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.7}
body.lab #note button{margin-left:10px}

#ptg{position:fixed;top:14px;right:14px;z-index:7}
#panel{
  position:fixed;top:0;right:0;bottom:0;z-index:5;width:320px;max-width:100%;box-sizing:border-box;
  padding:62px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
  background:rgba(8,8,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid var(--border-hi);
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.7,0,1),visibility 0s .32s;
}
body.phase-light #panel{background:rgba(255,255,255,.86)}
body.open #panel{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.7,0,1)}
#panel .phead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:0 0 12px;border-bottom:1px solid var(--border-hi)}
#panel .phead b{color:var(--text)}
#panel .phead .ro{text-align:right;line-height:1.7;font-weight:400}
#panel details{border-bottom:1px solid var(--border-hi)}
#panel summary{list-style:none;cursor:pointer;padding:12px 0;color:var(--text);display:flex;justify-content:space-between;user-select:none}
#panel summary::-webkit-details-marker{display:none}
#panel summary::after{content:'+';color:var(--muted)}
#panel details[open] summary::after{content:'−'}
#panel .row{padding:0 0 12px}
#panel .row label{display:flex;justify-content:space-between;align-items:center;gap:10px;white-space:nowrap}
#panel .row label b{color:var(--text);font-weight:700}
#panel .row input[type=text]{font:inherit;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--border-hi);border-radius:0;width:100%;box-sizing:border-box;padding:6px 0;margin-top:4px;outline:none}
#panel .row input[type=text]:focus{border-bottom-color:rgba(242,242,245,.4)}
#panel input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:14px;padding:0;margin:6px 0;border:1px solid var(--border-hi);border-radius:2px;background:transparent;cursor:pointer;display:block}
#panel input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#panel input[type=color]::-webkit-color-swatch{border:0;border-radius:1px}
#panel input[type=color]::-moz-color-swatch{border:0;border-radius:1px}
#panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--border-hi);outline:none;margin:6px 0}
#panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text);cursor:ew-resize}
#panel input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--text);cursor:ew-resize}
#panel .tg{padding:6px 10px;font-size:9px}
#panel .tg.mini{padding:2px 7px;font-size:8px;margin-left:6px;vertical-align:middle}
#panel .presets{display:flex;flex-wrap:wrap;gap:8px}
#panel .pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#panel .pick .pk.on{background:var(--text);color:var(--bg);border-color:var(--text)}
#panel #share{margin-top:8px}
#panel .spec .spec-blurb{font-weight:400;letter-spacing:.04em;text-transform:none;font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 12px}
#panel .spec .spec-notes{font-size:11px}
#panel .spec .spec-k{color:var(--text);margin:10px 0 6px}
#panel .spec .spec-l{list-style:none;margin:0 0 6px;padding:0;font-weight:400;letter-spacing:.04em;text-transform:none;font-size:11.5px;line-height:1.7}
#panel .spec .spec-l a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-hi)}
#panel .spec .spec-l a:hover{border-bottom-color:var(--text)}
#panel .spec .spec-files li{color:var(--muted)}
#panel .spec .spec-code{margin:0 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-weight:400;letter-spacing:0;text-transform:none;font-size:11px;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word;overflow:auto}

button.tg{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:transparent;border:1px solid var(--border-hi);border-radius:999px;
  padding:8px 14px;cursor:pointer;
}
button.tg:hover{border-color:rgba(128,128,140,.6)}

@media (max-width:760px){
  #panel{top:auto;left:0;right:0;width:auto;max-height:62vh;border-left:0;border-top:1px solid var(--border-hi);padding-top:16px;transform:translateY(100%)}
  body.lab #note{bottom:auto;top:40px;left:auto;right:18px;text-align:right}
  body.open #note{display:none}
}
@media (prefers-reduced-motion:reduce){ #panel,body.open #panel,body.lab #stage{transition:none} }

/* ═══ §2 THE LIBRARY ════════════════════════════════════════════════════ */
body.library{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.lib-wrap{max-width:var(--wrap,1360px);margin:0 auto;padding:0 clamp(20px,4vw,56px)}

.lib-hero{position:relative;padding:calc(var(--header-h,72px) + clamp(56px,10vh,120px)) 0 clamp(36px,6vh,72px);overflow:hidden}
.lib-hero .au{left:50%;top:-10%;width:min(1100px,120%);aspect-ratio:16/9;transform:translateX(-50%);--au-o:.30;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 95%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 95%)}
.lib-hero .lib-wrap{position:relative;z-index:1}
.lib-kicker{font-family:var(--mono);font-size:var(--fs-label,11px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lib-kicker .pearl{--pearl-size:11px}
.lib-title{font-size:clamp(2.6rem,7vw,6.5rem);font-weight:300;letter-spacing:-.035em;line-height:.98;margin:0 0 22px;max-width:14ch}
.lib-title em{font-style:normal;color:var(--muted)}
.lib-lead{font-size:clamp(1rem,1.35vw,1.2rem);font-weight:300;line-height:1.55;color:var(--muted);max-width:52ch;margin:0}
.lib-lead a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-hi)}
.lib-lead a:hover{border-bottom-color:var(--text)}
.lib-stats{display:flex;gap:28px;flex-wrap:wrap;margin:34px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lib-stats b{color:var(--text);font-weight:700;margin-right:6px}

.lib-filters{position:sticky;top:0;z-index:20;padding:12px 0;margin:0 0 6px}
.lib-filters::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--bg) 60%,transparent);}
.lib-filters .lib-wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lib-f{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border-hi);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.lib-f:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.lib-f[aria-pressed="true"]{color:var(--bg);background:var(--text);border-color:var(--text)}
.lib-f small{opacity:.55;margin-left:6px;font-weight:400}
.lib-search{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--border-hi);padding:8px 0;min-width:180px;outline:none}
.lib-search::placeholder{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px}
.lib-search:focus{border-bottom-color:var(--text)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(14px,1.6vw,22px);padding:0 0 120px}
.lib-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--r-tile,24px);min-height:340px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lib-card.is-hidden{display:none}
.lib-card.wide{grid-column:span 2}
@media (max-width:700px){ .lib-card.wide{grid-column:span 1} }
.lib-card .lib-prev{position:relative;flex:1;min-height:220px;overflow:hidden;border-radius:calc(var(--r-tile,24px) - 1px) calc(var(--r-tile,24px) - 1px) 0 0;background:var(--bg-2);display:flex;align-items:center;justify-content:center;isolation:isolate}
.lib-card .lib-prev iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .8s var(--ease)}
.lib-card .lib-prev iframe.in{opacity:1}
.lib-card .lib-prev .lib-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.lib-card .lib-prev.frame:hover .lib-hint{opacity:1}
.lib-card .lib-hint{position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,.6);border:1px solid var(--border);border-radius:999px;padding:4px 9px;opacity:0;transition:opacity .25s}
.lib-card .lib-meta{padding:18px 20px 20px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start}
.lib-card .lib-name{font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin:0}
.lib-card .lib-blurb{grid-column:1/-1;font-size:.86rem;line-height:1.5;color:var(--muted);margin:0;font-weight:300}
.lib-card .lib-tags{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.lib-tag{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:3px 8px}
.lib-tag.ctl{color:var(--text);border-color:var(--border-hi)}
.lib-tag.ext{color:var(--muted)}
.lib-card .lib-used{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-top:5px}
.lib-card .lib-arrow{position:absolute;top:14px;right:14px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-hi);display:grid;place-items:center;color:var(--text);font-size:13px;background:rgba(8,8,10,.5);opacity:0;transform:translate(4px,-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lib-card:hover .lib-arrow{opacity:1;transform:none}

/* inline live previews (the cheap ones render for real, inside the card) */
.lp-pearl{--pearl-size:96px}
.lp-mesh{position:absolute;inset:0;--m1:#4F46E5;--m2:#F472B6;--m3:#22D3EE}
.lp-mesh.mesh{opacity:1}
.lp-au{left:50%;top:50%;width:140%;aspect-ratio:5/4;transform:translate(-50%,-50%);--au-o:.7}
.lp-btns{display:flex;flex-direction:column;gap:12px;align-items:center}
.lp-tilt{width:72%;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:18px;box-sizing:border-box}
.lp-tilt .overline{margin:0}
.lp-burger{transform:scale(1.6)}
.lp-burger .burger{display:inline-flex!important}
.lp-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:20px}
.lp-tokens{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.lp-tokens i{display:block}
.lp-type{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;text-align:center;padding:0 24px}
.lp-type .overline{margin-top:10px;text-align:center}

.lib-foot{padding:30px 0 60px;border-top:1px solid var(--border);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lib-foot a{color:var(--muted);text-decoration:none}
.lib-foot a:hover{color:var(--text)}

/* the library's header: the site's own, with "labs" as the word */
.library .site-header .header-inner{display:flex;align-items:center;gap:18px;justify-content:space-between}
.library .hdr-right{display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.library .hdr-right a{color:var(--muted);text-decoration:none}
.library .hdr-right a:hover{color:var(--text)}

/* phones: the header's right-hand links would sit on the mark — keep one, tucked right */
@media (max-width:760px){
  .library .hdr-right{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
  .library .hdr-right a:first-child{display:none}
  .lib-search{margin-left:0;width:100%}
  .lib-card .lib-meta{grid-template-columns:1fr}
  .lib-card .lib-used{white-space:normal;padding-top:0}
}