/* lab notes pages */

.lab-hero{padding:calc(var(--nav-h) + 3.5rem) 0 2.5rem;border-bottom:1px solid var(--line)}
.lab-crumb{font-size:.78rem;color:var(--dim);margin-bottom:1.6rem}
.lab-crumb a{color:var(--red);text-decoration:none}
.lab-crumb a:hover{text-decoration:underline}
.lab-hero h1{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.lab-hero h1 .accent{color:var(--red)}
.lab-sub{color:var(--muted);font-size:.85rem;margin-top:1rem}
.lab-hr-note{color:var(--dim);max-width:56ch;margin-top:.9rem;font-size:.92rem}

.wn-tools{padding-block:1.8rem 0}
.wn-search{
  width:100%;background:var(--panel);border:1px solid var(--line2);color:var(--text);
  font-size:.85rem;padding:.85rem 1.1rem;outline:none;margin-bottom:1rem;transition:border-color .25s;
}
.wn-search:focus{border-color:var(--red)}
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;padding-block:0}
.fchip{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
  background:none;border:1px solid var(--line2);padding:.42rem .85rem;cursor:pointer;transition:.25s;
}
.fchip:hover{border-color:var(--red);color:var(--text)}
.fchip.on{background:var(--red);border-color:var(--red);color:#fff}
.wn-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.6rem}
.wn-count{color:var(--dim);font-size:.74rem;padding-block:1.6rem 3rem}

/* ---------- article ---------- */
.wa-container{max-width:820px;padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:4rem}
.wa-badges{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pill.cat{color:#29d3e0}
.wa-head h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.12;letter-spacing:-.015em}
.wa-meta{display:flex;gap:1.4rem;color:var(--dim);font-size:.72rem;letter-spacing:.08em;margin-top:1rem}

.tldr-box{
  border:1px solid var(--line2);border-left:3px solid var(--red);
  background:var(--panel);padding:1.15rem 1.35rem;margin:2rem 0;
}
.tldr-label{display:block;font-size:.64rem;letter-spacing:.18em;color:var(--red);margin-bottom:.5rem}
.tldr-box p{color:var(--text);font-size:.98rem}

.wa-body{font-size:1.02rem;line-height:1.75;color:#cfcdd4;margin-top:.5rem}
.wa-body p{margin-block:1.1rem}
.wa-body strong{color:var(--text)}
.wa-body em{color:var(--red)}
.wa-body h2{
  font-size:1.35rem;color:var(--text);margin-top:2.6rem;margin-bottom:.4rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.wa-body h2::before{content:"## ";color:var(--red);font-family:var(--mono);font-size:.9em}
.wa-body ul{margin:1rem 0 1rem 1.2rem}
.wa-body li{margin-block:.45rem}
.wa-body code.inline, .wa-body p code, .wa-body li code:not(pre code){
  font-family:var(--mono);font-size:.86em;background:var(--panel2);
  border:1px solid var(--line);padding:.12em .4em;border-radius:3px;color:var(--amber);
}

pre.code{
  position:relative;background:#0c0c10;border:1px solid var(--line2);
  padding:1.15rem 1.25rem;margin:1.4rem 0;overflow-x:auto;
  font-family:var(--mono);font-size:.82rem;line-height:1.7;color:#b9e0d2;
}
pre.code::before{
  content:attr(data-lang);position:absolute;top:0;left:0;
  font-size:.58rem;letter-spacing:.16em;color:var(--dim);
  background:var(--panel2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.28rem .65rem;
}
pre.code code{color:inherit}

.copy-btn{
  position:absolute;top:.5rem;right:.55rem;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--muted);background:var(--panel2);
  border:1px solid var(--line2);padding:.34rem .75rem;cursor:pointer;
  opacity:0;transform:translateY(-3px);transition:.22s var(--ease);
}
pre.code:hover .copy-btn,.copy-btn:focus-visible{opacity:1;transform:none}
.copy-btn:hover{color:var(--text);border-color:var(--red)}
.copy-btn.done{color:var(--green);border-color:rgba(0,224,127,.55)}
@media(hover:none){.copy-btn{opacity:1;transform:none}}

details.flag-box{
  margin:1rem 1rem 1rem 0;border:1px dashed rgba(0,224,127,.5);
  background:rgba(0,224,127,.06);padding:.85rem 1.1rem;
}
details.flag-box summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  cursor:pointer;list-style:none;user-select:none;
}
details.flag-box summary::-webkit-details-marker{display:none}
details.flag-box summary:hover .flag-label{color:#7dff9b}
.flag-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--green)}
.flag-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.flag-hint::after{content:"[ spoiler \2014  click to reveal ]"}
details[open].flag-box{border-style:solid}
details[open].flag-box .flag-hint::after{content:"[ hide ]"}
details.flag-box code{
  display:inline-block;margin-top:.75rem;font-family:var(--mono);
  font-size:.92rem;color:var(--green);text-shadow:0 0 18px rgba(0,224,127,.5);
}

.wnav{
  display:flex;justify-content:space-between;gap:1rem;margin-top:3.5rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.wnav-link{color:var(--dim);font-size:.7rem;text-decoration:none;letter-spacing:.14em;line-height:1.9}
.wnav-link.right{text-align:right}
.wnav-link span{color:var(--muted);font-size:.78rem;display:block;letter-spacing:0}
.wnav-link:hover span{color:var(--red)}

.nf-wrap{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;text-align:center}
.nf-code{color:var(--red);font-size:clamp(2rem,7vw,4rem);letter-spacing:.06em}
.nf-wrap p{color:var(--muted);max-width:44ch}

@media(max-width:640px){
  .wa-container{padding-inline:20px}
  pre.code{font-size:.72rem}
}