/* Shared mechanics. Family files own composition and map authoritative shell roles. */
.example-root {
  color: var(--ex-text);
  background: var(--ex-bg);
  overflow-wrap: anywhere;
  line-height: 1.7;
  padding-block: clamp(2rem, 5vw, 5rem);
}
.example-root *, .example-root *::before, .example-root *::after { box-sizing: border-box; }
.example-root [hidden] { display: none !important; }
.example-root :is(h2,h3,h4,h5,h6) { color: var(--ex-strong); line-height: 1.25; }
.example-root h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 1.25rem; scroll-margin-top: 8rem; }
.example-root h3 { font-size: 1.2rem; margin: 0 0 .7rem; }
.example-root p { margin: 0 0 1rem; }
.example-root a:not(.example-button) { color: var(--ex-link); text-underline-offset: .2em; }
.example-root a:not(.example-button):hover { text-decoration: underline; }
.example-root :focus-visible { outline: 3px solid var(--ex-focus); outline-offset: 4px; }
/* Button appearance belongs to each family's native shell. */
.example-root .example-button { text-decoration: none; }
.example-root .example-button:hover { text-decoration: none; }
.example-root .example-button:disabled { opacity: .6; cursor: default; }
.example-wrap { width: calc(100% - 2.5rem); max-width: 74rem; margin-inline: auto; min-width: 0; }
.example-reading { max-width: 46rem; }
.example-section { margin-block: 0 3.5rem; min-width: 0; }
.example-section__body, .example-section__label { min-width: 0; }
.example-prose { max-width: 68ch; }
.example-prose blockquote { border-inline-start: 3px solid var(--ex-link); margin-inline: 0; padding-inline-start: 1.5rem; }
html[data-appearance=dark] .example-prose :is(blockquote,.footnotes) { color: var(--ex-text); }
.example-prose :is(ul,ol) { padding-inline-start: 1.5rem; }
.example-prose pre { overflow-x: auto; max-width: 100%; padding: 1.25rem; background: var(--ex-panel); color: var(--ex-text); }
.example-prose code { font-family: var(--ex-mono); font-size: .9em; }
.example-prose :not(pre) > code { background: var(--ex-panel); padding: .1em .3em; }
.example-prose math { font-size: 1.4rem; margin-block: 1rem; }
.example-actions, .example-context { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
.example-context { border-bottom: 1px solid var(--ex-line); padding-bottom: 1rem; }
.example-notice { background: var(--ex-panel); border-inline-start: 3px solid var(--ex-link); padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: .95rem; }
.example-notice p:last-child { margin: 0; }
.example-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; }
.example-card { min-width: 0; padding-block: 1.5rem; border-block-start: 1px solid var(--ex-line); }
.example-card p { color: var(--ex-muted); }
.example-card img { width: 100%; height: auto; }
.example-list { list-style: none; padding: 0; margin: 0; }
.example-list > li { border-block-start: 1px solid var(--ex-line); padding-block: 1.5rem; }
.example-list h3 { margin-top: .5rem; }
.example-list__meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--ex-muted); font-size: .9rem; }
.example-tag { display: inline-block; padding: .15rem .5rem; background: var(--ex-panel); color: var(--ex-text); font-size: .85rem; }
.example-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.example-facts { margin: 0; }
.example-facts > div { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--ex-line); }
.example-facts dt { font-weight: 700; }
.example-facts dd { margin: 0; }
.example-figure, .example-gallery figure { margin: 0; }
.example-figure img, .example-gallery img { display: block; width: 100%; height: auto; }
.example-root figcaption { color: var(--ex-muted); font-size: .9rem; margin-top: .75rem; }
.example-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--ex-line); }
.example-root table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.example-root caption { text-align: start; padding: 1rem; font-weight: 700; }
.example-root :is(th,td) { padding: .85rem 1rem; text-align: start; vertical-align: top; border-top: 1px solid var(--ex-line); min-width: 8rem; }
.example-root thead { background: var(--ex-panel); }
.example-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1.5rem; margin: 0; }
.example-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 1px solid var(--ex-line); padding-top: 1rem; }
.example-stats dd { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 .75rem; }
.example-stats dt { color: var(--ex-muted); }
.example-faq details { padding-block: 1rem; border-bottom: 1px solid var(--ex-line); }
.example-faq summary { cursor: pointer; font-weight: 700; padding-block: .25rem; }
.example-faq details p { margin: 1rem 0 0; max-width: 65ch; }
.example-price { color: var(--ex-text) !important; font-size: 1.4rem; }
.example-plans .example-card { display: flex; flex-direction: column; align-items: start; }
.example-plans ul { padding-inline-start: 1.25rem; margin-bottom: 2rem; }
.example-plans .example-button { margin-top: auto; }
.example-form, .example-search { max-width: 40rem; }
.example-root fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.example-root legend { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }
.example-root label { display: block; font-weight: 700; margin: 1rem 0 .4rem; }
.example-root :is(input:not([type=checkbox]),select,textarea) { width: 100%; min-height: 2.75rem; border: 1px solid var(--ex-control-line); background: var(--ex-input); color: var(--ex-text); padding: .7rem; font: inherit; border-radius: .15rem; }
.example-root textarea { resize: vertical; }
.example-root [data-conversation] label textarea { display: block; margin-top: .4rem; font-weight: 400; }
.example-root .example-checkbox { display: flex; gap: .75rem; align-items: start; font-weight: 400; }
.example-checkbox input { width: 1.2rem; height: 1.2rem; margin-top: .25rem; accent-color: var(--ex-link); }
.example-form button { margin: 1.25rem .5rem .75rem 0; }
.example-help { font-size: .9rem; color: var(--ex-muted); }
.example-search__controls { display: flex; gap: .75rem; margin-bottom: 1rem; }
.example-root [role=status] { min-height: 1.7em; margin-top: .75rem; }
.example-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem; }
.example-gallery a span { display: inline-block; margin-top: .5rem; }
.example-lightbox { width: min(94vw, 64rem); max-height: 90vh; overflow-y: auto; color: var(--ex-text); background: var(--ex-bg); padding: 1.5rem; border: 1px solid var(--ex-line); }
.example-lightbox::backdrop { background: #061325b3; }
.example-lightbox img { width: 100%; height: auto; }
.example-lightbox figure { margin: 1rem 0 0; }
.example-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.example-workspace__detail { background: var(--ex-panel); padding: 1.5rem; align-self: start; }
.example-records { list-style: none; padding: 0; }
.example-records li { padding-block: 1.25rem; border-bottom: 1px solid var(--ex-line); }
.example-records .example-tag { margin: .5rem; }
.example-records button[aria-pressed=true] { outline: 3px solid var(--ex-focus); outline-offset: 3px; }
.example-messages { padding-inline-start: 1.5rem; max-width: 48rem; }
.example-messages li { margin-bottom: 1.5rem; }
.example-local-index { font-size: .95rem; }
html[data-appearance=dark] .example-local-index .eyebrow { color: var(--ex-link); }
.example-local-index ol { list-style: none; padding: 0; }
.example-local-index li { margin-bottom: .6rem; }
.example-category-nav { display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; padding-block: 1rem 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--ex-line); }
.example-catalog-intro { max-width: 52rem; }
.example-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; font-size: .95rem; }
.example-port-note { border-top: 1px solid var(--ex-line); padding-top: 1.5rem; margin-top: 3rem; font-size: .9rem; color: var(--ex-muted); }
@media (max-width: 48rem) {
  .example-workspace { grid-template-columns: 1fr; }
  .example-facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .example-search__controls { flex-direction: column; }
}
@media print {
  .example-root { --ex-bg: white; --ex-text: black; --ex-strong: black; --ex-muted: #333; --ex-link: #222; --ex-panel: #f3f3f3; --ex-line: #999; padding: 0; }
  main details::details-content { content-visibility: visible !important; }
  /* Background graphics are commonly omitted: preserve legible text and data. */
  body, main { background: #fff !important; }
  main, main *, .example-root .example-price { color: #000 !important; text-shadow: none !important; }
  main * { background-color: transparent !important; background-image: none !important; }
  main svg text { fill: #000 !important; }
  .example-root pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: visible; }
  .example-root table { table-layout: fixed; width: 100%; }
  .example-root :is(th,td) { overflow-wrap: anywhere; word-break: break-word; }
  .example-local-index, .example-breadcrumb, .example-port-note, .example-pagination, .example-root button, .example-category-nav, .site-header, .nav-shell, .site-footer { display: none !important; }
  .example-wrap { width: 100%; max-width: none; }
  .example-root [data-list-item][hidden] { display: block !important; }
  .example-root [data-select-record], .example-root #people-table .dash-sort { display: inline !important; border: 0; padding: 0; background: transparent; color: #000; font: inherit; text-align: start; }
  #people-table[data-print-all] tbody:not([data-print-people]) { display: none; }
  #people-table :is(th,td):first-child, #people-table :is(th,td):last-child { display: none; }
  .example-section, .example-document { display: block !important; }
  .example-table-scroll { overflow: visible; }
  .example-root table { font-size: 9pt; }
  .example-root :is(th,td) { min-width: 0; padding: .4rem; }
  .example-root a:not(.example-button) { text-decoration: underline; }
  .example-root figure { break-inside: avoid; }
}
.example-root :is(label, legend) { color: var(--ex-text); }
.example-workspace__detail > button { margin: .5rem .5rem .5rem 0; }
.example-records li > p:first-of-type { margin-top: .75rem; }

/* General table density variant, shared by reference documents and applications. */
.example-root .example-table-scroll[data-density=compact] :is(th,td) { padding: .45rem .7rem; }
/* The source shells' reduced-motion .01ms duration creates a transition even
   on elements without one (including the root). Zero duration avoids a stale
   frame when text size or appearance changes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}