/* Scoped styles for Lab pages */
/* fix-lab-video-container */
.lab-video{overflow:visible;}

.lab-container{max-width:960px;margin:0 auto;padding:16px}
.lab-video .yt-lite{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,.08)}
.lab-video .yt-lite iframe{width:100%;height:100%;border:0;display:block}
.lab-meta{opacity:.75}
.lab-note{background:#f6f7f9;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin:16px 0}
.lab-fig{margin:0 0 1rem 0}
.lab-figcap{font-size:.9rem;opacity:.8;margin-top:.75rem; margin-bottom:8px; }

/* Hide global site header (white strip) on Lab pages only */
.site-header{ display:none !important; }

/* Hide language pills on Lab detail pages opting out */
.no-pills .hl-pills{display:none!important}


/* Lab disclaimer box */
.lab-disclaimer{
  background:#f7f8fa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0 16px 0;
  color:#374151;
  font-size:.95rem;
  line-height:1.5;
}
.lab-disclaimer strong{font-weight:600}

/* Hide legacy segmented switcher when opted out */
.no-pills .lang-switcher.segmented{display:none!important}

/* Ensure consistent gap between video block and lab-note */
.lab-fig + .lab-note{margin-top:16px!important}

/* Consistent spacing after caption on Lab detail pages */
.lab-figcap + .lab-note{margin-top:16px!important}


/* --- unify bottom spacing for the last grey note on detail pages --- */
.post .lab-note:last-child{ margin-bottom: 24px !important; }
.post .lab-figcap + .lab-note{ margin-top: 16px !important; }
.post .lab-fig + .lab-note{ margin-top: 16px !important; }
/* --- end patch --- */

/* Ensure internal bottom space in Lab posts to avoid margin-collapsing */
.post{padding-bottom:24px}


/* --- LAB unified figcaption / credit style --- */
.lab-fig figcaption {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.lab-fig figcaption a { text-decoration: underline; }
.lab-fig figcaption small { opacity: .9; }


/* --- Ergonomics pass (2025-09-11) ---------------------------------------- */
/* Constrain readable text width inside Lab articles */
.lab-container article {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Ensure lists are aligned and have breathing room */
.lab-container article ul {
  padding-left: 1.25rem;
  margin: .75rem 0 1rem;
}
.lab-container article li {
  margin: .35rem 0;
}

/* Callout/quote box */
.lab-note, aside.lab-note {
  display: block;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #64748b;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  overflow: hidden;
}

/* Avoid horizontal spilling on narrow viewports */
.lab-container, .lab-container * {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Harmonize hr + section spacing */
.lab-container article hr {
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 20px 0;
}

/* Figure caption tone-down for dark/light */
.lab-fig figcaption {
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: .5rem;
}

/* Make embedded YT responsive and not overflow */
.lab-video .yt-lite,
.lab-video iframe {
  width: 100%;
  height: auto;
  border: 0;
}

/* Small screens: keep comfortable side paddings */
@media (max-width: 480px){
  .lab-container{ padding: 14px; }
  .lab-container article{ font-size: 1.02rem; }
}

/* ------------------------------------------------------------------------ */


/* --- See-also box: layout & link normalization (2025-09-11) ----------- */
.lab-see-also{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
  background:#f6f7f9;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin:16px 0;
}
/* Normal links inside the box look like links */
.lab-see-also a{
  display:inline;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  text-decoration:underline;
  color:#2563eb;
  font-weight:500;
}
/* If someone accidentally wrapped the label in <a>, neutralize it */
.lab-see-also a:first-child{
  color:inherit;
  text-decoration:none;
  pointer-events:none;
  cursor:default;
  font-weight:600;
}
/* When label is explicitly marked up */
.lab-see-also .label{
  color:inherit;
  font-weight:600;
  text-decoration:none;
}