/* Shared presentation for Lab documentation examples; no demo styles are reset. */
/* Older lesson shells must also accommodate enlarged text around the examples. */
[data-lab-code-page] { margin: 0; }
[data-lab-code-page] .site-header, [data-lab-code-page] .header-inner, [data-lab-code-page] .site-nav { box-sizing: border-box; max-inline-size: 100%; }
[data-lab-code-page] main, [data-lab-code-page] main :where(section, article, div, aside, form, nav, label, fieldset) { min-inline-size: 0; }
[data-lab-code-page] main :where(h1, h2, h3, h4, p, li, dd, dt, label, a, button, summary, th, td) { overflow-wrap: anywhere; }
[data-lab-code-page] main :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
[data-lab-code-page] main pre { box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; overflow-x: auto; }
[data-lab-code-page] main :where(input, select, textarea) { min-inline-size: 0; max-inline-size: 100%; }
[data-lab-code-page] .site-header .header-inner, [data-lab-code-page] .site-header .site-nav { flex-wrap: wrap; }
[data-lab-code-page] .codebox button.copy { min-width: 44px; min-height: 44px; }
pre[data-lab-code], .lab-code-example pre {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid #364957;
  border-radius: .55rem;
  background: #111c27;
  color: #edf5fc;
  text-align: left;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  tab-size: 2;
  font: 400 .9rem/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
  text-shadow: none;
}
pre[data-lab-code] > code, .lab-code-example pre > code {
  display: block;
  min-width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-shadow: none;
  white-space: inherit;
}
pre[data-lab-code]:focus-visible, .lab-code-copy:focus-visible {
  outline: 3px solid #da9e30;
  outline-offset: 3px;
}
.lab-code-examples {
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem;
  min-width: 0;
  margin: 3rem auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #b7c6cb;
  border-radius: .85rem;
  background: #f2f6f7;
  color: #172d38;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  scroll-margin-top: 7rem;
}
.lab-code-examples *, .lab-code-example * { box-sizing: border-box; }
.lab-code-examples :where(h2, h3, p, a, figcaption, span) { overflow-wrap: anywhere; }
.lab-code-examples > h2 { margin: 0 0 .7rem; color: inherit; font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.2; letter-spacing: -.025em; }
.lab-code-examples > p { max-width: 75ch; margin: 0 0 1.2rem; color: #354c58; line-height: 1.7; }
.lab-code-examples .lab-code-kicker { margin: 0 0 .65rem; font: 700 .78rem/1.5 ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #355968; }
.lab-code-example { min-width: 0; max-width: 100%; margin: 1.4rem 0 0; padding: 0; }
.lab-code-example figcaption { display: block; margin: 0; padding: 1rem 1.1rem; border: 1px solid #b7c6cb; border-bottom: 0; border-radius: .55rem .55rem 0 0; background: #fff; color: #172d38; }
.lab-code-example h3 { margin: .2rem 0 .6rem; color: inherit; font: 700 1.12rem/1.45 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
.lab-code-example figcaption p { margin: 0; max-width: 85ch; color: #354c58; font-size: 1rem; line-height: 1.65; }
.lab-code-example .lab-code-number { color: #355968; font: 700 .78rem/1.5 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.lab-code-example pre { border-radius: 0 0 .55rem .55rem; }
.lab-code-example .lab-code-source { margin: .4rem 0 0; padding: 0; font-size: .9rem; line-height: 1.6; color: #354c58; }
.lab-code-examples a { color: #124e70; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.lab-code-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .8rem; min-width: 0; margin: .7rem 0 .3rem; font: 600 .8rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.lab-code-tools span { min-width: 0; overflow-wrap: anywhere; }
.lab-code-copy { flex: 0 0 auto; min-width: 7rem; min-height: 44px; margin: 0; padding: .6rem .9rem; border: 1px solid #596f7b; border-radius: .4rem; background: #fff; color: #172d38; font: 700 .85rem/1.35 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.lab-code-copy:hover { background: #e5eef2; color: #172d38; }
.lab-code-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keep a React-owned demo root independent of the static reading section. */
body > .lab-code-examples { width: calc(100% - 2rem); }
@media (max-width: 480px) {
  .lab-code-examples { padding: .8rem; }
  .lab-code-example figcaption { padding: .85rem; }
  pre[data-lab-code], .lab-code-example pre { padding: 1rem; }
}
@media (forced-colors: active) {
  pre[data-lab-code], .lab-code-examples, .lab-code-example figcaption, .lab-code-copy { border-color: CanvasText; }
}
@media print {
  .lab-code-tools, .lab-code-status { display: none; }
  pre[data-lab-code], .lab-code-example pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #111; background: #fff; }
  pre[data-lab-code] > code { min-width: 0; }
}