/* Shell for V1 explainers inside V3. Recreates only the V1 publication primitives the explainers use,
   mapped to V3 tokens and scoped to .lab so they cannot leak into the rest of the site. */
.lab {
  --paper: var(--page);
  --line: var(--rule);
  --green: var(--accent);
  --blue: #2f5f8a;
  --orange: var(--copper);
  --il-line: #9fb1a8;
  --il-soft: #e3e9e1;
  --il-good: var(--accent);
  --il-rust: var(--copper);
  --il-blue: #2f5f8a;
}

.lab button,
.lab input,
.lab select {
  font: inherit;
  color: inherit;
}

.lab button,
.lab summary {
  cursor: pointer;
}

.lab button,
.lab input,
.lab select,
.lab summary {
  min-height: 44px;
}

.lab :is(button, input, select, summary, svg, canvas):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lab [hidden] {
  display: none !important;
}

.lab-head {
  max-width: 900px;
}

.lab-head h1 {
  font-size: 58px;
  line-height: 1.08;
  margin-top: 12px;
}

.lab-head .lede {
  margin-top: 16px;
}

.lab-head > .meta {
  margin-top: 12px;
}

.lab .article-content {
  margin-top: var(--s3);
}

.lab .wrap,
.lab .figure-wide {
  width: 100%;
  max-width: none;
  margin: 24px 0;
}

.lab .editorial {
  max-width: 720px;
  margin: 48px auto;
  font: 19px/1.65 var(--serif);
}

.lab .editorial h2 {
  font: 400 30px/1.2 var(--serif);
}

.lab .editorial p {
  margin: 16px 0;
}

.lab .editorial figure {
  margin: 28px 0;
}

.lab .editorial figcaption,
.lab .figure-caption {
  font: 14px/1.6 var(--sans);
  color: var(--muted);
}

.lab .scientific-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 24px;
  padding: 24px 0;
  border-block: 1px solid var(--rule);
  overflow-x: auto;
}

.lab .scientific-equation math {
  max-width: 100%;
}

.lab .margin-annotation {
  border-left: 2px solid var(--accent);
  padding: 0 16px;
  font: 15px/1.6 var(--sans);
  color: var(--muted);
}

.lab .control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lab .control-row button {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 14px;
}

.lab .control-row button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--page);
}

.lab .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lab .publication-limitations,
.lab .publication-references {
  max-width: 720px;
  margin: 56px auto 0;
  font: 18px/1.65 var(--serif);
}

.lab .publication-limitations h2,
.lab .publication-references h2 {
  font: 400 28px/1.2 var(--serif);
  margin-bottom: 12px;
}

.lab .publication-limitations ul,
.lab .publication-references ol {
  padding-left: 1.2em;
}

.lab .publication-limitations li + li,
.lab .publication-references li + li {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .lab-head h1 {
    font-size: 38px;
  }

  .lab .editorial {
    font-size: 18px;
  }
}