/* ==========================================================================
   Tailwind CSS Handbook — documentation theme
   Hand-written CSS so the docs chrome never competes with the Tailwind
   examples rendered inside them.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-subtle: #f8f9fb;
  --bg-sunken: #f1f3f7;
  --bg-elevated: #ffffff;
  --bg-code: #f6f7f9;

  --text: #16181d;
  --text-muted: #5b6270;
  --text-faint: #7e8798;
  --text-inverse: #ffffff;

  --border: #e4e7ec;
  --border-strong: #d0d5dd;

  --accent: #5b4bdb;
  --accent-hover: #4a3ac4;
  --accent-soft: #eeecfd;
  --accent-border: #cfc9f7;
  --accent-text: #4a3ac4;

  --note: #2563a8;
  --note-soft: #eaf2fb;
  --note-border: #c3dbf3;

  --tip: #0f766e;
  --tip-soft: #e6f5f2;
  --tip-border: #b7e2da;

  --warn: #a35b06;
  --warn-soft: #fdf3e4;
  --warn-border: #f2d9ac;

  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --danger-border: #f5c9c6;

  --legacy: #6b6478;
  --legacy-soft: #f3f2f6;
  --legacy-border: #ddd9e4;

  --shadow-sm: 0 1px 2px rgb(16 18 29 / 0.06), 0 1px 3px rgb(16 18 29 / 0.04);
  --shadow-md: 0 4px 12px rgb(16 18 29 / 0.08), 0 2px 4px rgb(16 18 29 / 0.04);
  --shadow-lg: 0 20px 48px rgb(16 18 29 / 0.16), 0 4px 12px rgb(16 18 29 / 0.08);

  /* syntax tokens */
  --tok-comment: #7a8494;
  --tok-tag: #b3261e;
  --tok-attr: #7a4bbd;
  --tok-str: #0b6e4f;
  --tok-kw: #b3261e;
  --tok-num: #9a5b00;
  --tok-fn: #2557a7;
  --tok-prop: #2557a7;
  --tok-var: #0f766e;
  --tok-sel: #9a5b00;
  --tok-punct: #6a7181;
  --tok-meta: #7a8494;

  --toc-w: 14rem;
  --topbar-h: 3.25rem;
  --content-max: 96rem;
  --shell-max: 100rem;

  /* Page gutters. Asymmetric on purpose: a small run-in on the left, and
     almost nothing on the right so the TOC sits near the edge instead of
     leaving an empty column beside it. */
  --pad-left: 2.5rem;
  --pad-right: 1.5rem;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 0.5rem;
  --radius-sm: 0.375rem;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0e1016;
  --bg-subtle: #12151d;
  --bg-sunken: #171b25;
  --bg-elevated: #171b25;
  --bg-code: #12151d;

  --text: #e8eaf0;
  --text-muted: #a2abbd;
  --text-faint: #7c8697;
  --text-inverse: #0e1016;

  --border: #242a36;
  --border-strong: #333b4b;

  --accent: #a99bff;
  --accent-hover: #bfb4ff;
  --accent-soft: #1c1b33;
  --accent-border: #34305c;
  --accent-text: #bfb4ff;

  --note: #7db4ea;
  --note-soft: #13202e;
  --note-border: #23394f;

  --tip: #5fcfbc;
  --tip-soft: #0f2320;
  --tip-border: #1d4039;

  --warn: #e0a458;
  --warn-soft: #241c10;
  --warn-border: #43331c;

  --danger: #f08a83;
  --danger-soft: #261615;
  --danger-border: #482825;

  --legacy: #a49db3;
  --legacy-soft: #1b1a22;
  --legacy-border: #302e3c;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 24px 56px rgb(0 0 0 / 0.65);

  --tok-comment: #6f7b8d;
  --tok-tag: #f08a83;
  --tok-attr: #d3a8ff;
  --tok-str: #7fd6a9;
  --tok-kw: #f08a83;
  --tok-num: #e8bb7a;
  --tok-fn: #82b7f5;
  --tok-prop: #82b7f5;
  --tok-var: #5fcfbc;
  --tok-sel: #e8bb7a;
  --tok-punct: #98a2b3;
  --tok-meta: #6f7b8d;
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky bar instead of hiding behind it. */
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Proportional, lining figures read better in prose than the tabular
     defaults some UI faces ship with. */
  font-variant-numeric: proportional-nums;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque rather than translucent: a blurred backdrop on a full-width sticky
     element repaints on every scroll frame, and buys nothing on a page whose
     job is to hold still while you read. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  height: var(--topbar-h);
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--pad-left);
  padding-right: var(--pad-right);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, var(--accent), #8b7bff);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: none;
}

.brand-name {
  font-size: 0.9375rem;
  font-weight: 640;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-version {
  flex: none;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------- main menus */

.mainnav {
  flex: 1;
  min-width: 0;
}

.mainnav-list {
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.13s ease, background 0.13s ease;
}

.menu-trigger::-webkit-details-marker {
  display: none;
}

.menu-trigger:hover,
details[open] > .menu-trigger {
  color: var(--text);
  background: var(--bg-sunken);
}

.menu-trigger[data-current='true'] {
  color: var(--text);
  font-weight: 620;
}

/* Underline marks the section the current page belongs to. */
.menu:has(.menu-trigger[data-current='true'])::after {
  content: '';
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.menu-caret {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

details[open] > .menu-trigger .menu-caret {
  transform: rotate(180deg);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  z-index: 55;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.menu-end .menu-panel {
  left: auto;
  right: 0;
}

@media (prefers-reduced-motion: no-preference) {
  details[open] > .menu-panel {
    animation: menu-in 0.12s ease-out;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

.menu-cols {
  display: flex;
  gap: 0.35rem;
}

.menu-col {
  min-width: 11.5rem;
}

.menu-col + .menu-col {
  padding-left: 0.35rem;
  border-left: 1px solid var(--border);
}

.menu-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  padding: 0.15rem 0.5rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-group-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.menu-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-col li a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8438rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}

.menu-col li a:hover {
  color: var(--text);
  background: var(--bg-sunken);
}

.menu-col li a.is-active {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 600;
}

/* ----------------------------------------------------------- bar controls */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-button:hover {
  background: var(--bg-sunken);
  color: var(--text);
}

.icon-button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.nav-toggle {
  display: none;
}

.nav-toggle .icon-close,
body.nav-open .nav-toggle .icon-bars {
  display: none;
}

body.nav-open .nav-toggle .icon-close {
  display: block;
}

.theme-toggle .icon-moon,
[data-theme='dark'] .theme-toggle .icon-sun {
  display: none;
}

[data-theme='dark'] .theme-toggle .icon-moon {
  display: block;
}

.search-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.45rem 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-faint);
  font: inherit;
  font-size: 0.8438rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.search-trigger:hover {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.search-trigger svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

.search-trigger span {
  min-width: 5rem;
  text-align: left;
}

kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.4;
}


/* ------------------------------------------------------------------- shell */

/* Two columns: the article (itself capped at a comfortable measure and
   centred in its track) and a narrow table-of-contents rail. Pages without
   enough headings to warrant a TOC drop to a single centred column. */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--pad-left);
  padding-right: var(--pad-right);
}

.shell.has-toc {
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: 0 2rem;
}

/* ------------------------------------------------------------------ drawer */

/* The full tree, for viewports too narrow for the top bar menus. Fixed rather
   than in flow so opening it never reflows the article underneath. */

.drawer {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 45;
  max-height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

body.nav-open .drawer {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.drawer-nav {
  padding: 0.6rem var(--pad-right) 1.5rem var(--pad-left);
}

.drawer-section + .drawer-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.drawer-label {
  margin: 0.5rem 0 0.15rem;
  padding-inline: 0.5rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.drawer-group > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.drawer-group > summary::-webkit-details-marker {
  display: none;
}

.drawer-group > summary:hover {
  background: var(--bg-sunken);
}

.drawer-group > summary > span {
  flex: 1;
}

.drawer-chevron {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.drawer-group[open] > summary .drawer-chevron {
  transform: rotate(90deg);
}

.drawer-group ul {
  margin: 0.1rem 0 0.4rem 1.25rem;
  padding: 0 0 0 0.85rem;
  list-style: none;
  border-left: 1px solid var(--border);
}

.drawer-group li a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.drawer-group li a:hover {
  color: var(--text);
  background: var(--bg-sunken);
}

.drawer-group li a.is-active {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 600;
}

.drawer-scrim {
  display: none;
}

body.nav-open .drawer-scrim {
  display: block;
  position: fixed;
  inset: var(--topbar-h) 0 0;
  z-index: 40;
  background: rgb(10 12 18 / 0.35);
}

/* ----------------------------------------------------------------- content */

.content {
  min-width: 0;
  padding: 1.5rem 0 4rem;
}

/* The article fills its track rather than sitting centred inside it, so no
   empty column opens up between the text and the table of contents, and none
   is left over on the right. `--content-max` is set wide enough that it never
   bites at the sizes --shell-max allows; lower it to pull long paragraphs back
   to a narrower measure. */
.prose {
  max-width: var(--content-max);
  margin-inline: 0;
  line-height: 1.7;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--border-strong);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent-text);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text);
  font-weight: 550;
}

.page-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 1.5rem + 1.05vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.lede {
  margin: 0 0 1.4rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.prose h2,
.prose h3,
.prose h4 {
  position: relative;
  scroll-margin-top: calc(var(--topbar-h) + 1.5rem);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
/* Three clearly separated levels. A rule above every h2 does the section
   splitting, so the headings themselves stay modest in size. */
.prose h2 {
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  font-size: 1.3125rem;
  font-weight: 670;
  line-height: 1.35;
}

/* The first section starts right under the lede — no rule, no big gap. */
.lede + h2,
.breadcrumbs + h2,
.prose > h2:first-child {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin: 1.7rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 660;
  line-height: 1.4;
}

.prose h4 {
  margin: 1.3rem 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 660;
  line-height: 1.45;
}

/* Nothing should butt straight up against the heading above it. */
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0;
}

.heading-anchor {
  position: absolute;
  left: -1.15rem;
  color: var(--text-faint);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.15s ease;
}

.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}

.prose p {
  margin: 0 0 0.95rem;
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.25rem;
}

.prose li > p {
  margin-bottom: 0.5rem;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose li::marker {
  color: var(--text-faint);
}

.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose strong {
  font-weight: 650;
  color: var(--text);
}

.prose hr {
  margin: 1.9rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.prose > blockquote {
  margin: 0 0 1.1rem;
  padding: 0.1rem 0 0.1rem 0.95rem;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.prose img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Last element in the article never adds trailing space of its own. */
.prose > :last-child {
  margin-bottom: 0;
}

.prose > blockquote p:last-child {
  margin-bottom: 0;
}

:not(pre) > code {
  padding: 0.13em 0.38em;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-code);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86em;
  word-break: break-word;
}

.prose a code {
  color: inherit;
  border-color: var(--accent-border);
}

/* ------------------------------------------------------------ code blocks */

.code-block {
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-code);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.3rem 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.code-lang {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.code-copy:hover {
  background: var(--bg-sunken);
  color: var(--text);
}

.code-copy svg {
  width: 0.85rem;
  height: 0.85rem;
}

.code-copy.is-copied {
  color: var(--tip);
}

.code-body {
  margin: 0;
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
  scrollbar-width: thin;
}

.code-body::-webkit-scrollbar {
  height: 0.5rem;
}

.code-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--border-strong);
}

.code-body code {
  font: inherit;
  white-space: pre;
}

.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-tag     { color: var(--tok-tag); }
.tok-attr    { color: var(--tok-attr); }
.tok-str     { color: var(--tok-str); }
.tok-kw      { color: var(--tok-kw); }
.tok-num     { color: var(--tok-num); }
.tok-fn      { color: var(--tok-fn); }
.tok-prop    { color: var(--tok-prop); }
.tok-var     { color: var(--tok-var); }
.tok-sel     { color: var(--tok-sel); }
.tok-punct   { color: var(--tok-punct); }
.tok-meta    { color: var(--tok-meta); }

/* ----------------------------------------------------------- live examples */

.code-block.has-preview {
  background: var(--bg);
}

.example-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.example-tabs button,
.tab-list button {
  padding: 0.25rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.example-tabs button:hover,
.tab-list button:hover {
  color: var(--text);
  background: var(--bg-sunken);
}

.example-tabs button.is-active,
.tab-list button.is-active {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.example-preview {
  min-height: 4.5rem;
  background:
    linear-gradient(45deg, var(--bg-subtle) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, var(--bg-subtle) 25%, transparent 25%) -8px 0/16px 16px,
    var(--bg);
}

.example-preview iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Matches the ground the preview document paints for itself, so a frame that
     has not painted yet does not flash white against a dark page. */
  background: var(--bg);
}

.example-skeleton {
  padding: 1.5rem 1rem;
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.example-code .code-block,
.example-code .code-head {
  border: 0;
  border-radius: 0;
}

.example-code .code-block {
  margin: 0;
}

/* ------------------------------------------------------------------- tabs */

.tabs {
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.tab-panels {
  padding: 0.9rem 0.9rem 0.1rem;
}

.tab-panels > div > :last-child {
  margin-bottom: 0.9rem;
}

.tab-panels .code-block {
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------- callouts */

.callout {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--note-border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--note-soft);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.62;
}

.callout-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem;
  color: var(--note);
  font-size: 0.875rem;
  font-weight: 680;
  letter-spacing: -0.005em;
}

.callout-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.callout-body p {
  margin-bottom: 0.55rem;
}

.callout-tip        { border-color: var(--tip-border);    background: var(--tip-soft); }
.callout-tip .callout-title,
.callout-new .callout-title { color: var(--tip); }
.callout-new        { border-color: var(--tip-border);    background: var(--tip-soft); }

.callout-practice   { border-color: var(--tip-border);    background: var(--tip-soft); }
.callout-practice .callout-title { color: var(--tip); }

.callout-warning    { border-color: var(--warn-border);   background: var(--warn-soft); }
.callout-warning .callout-title { color: var(--warn); }

.callout-danger,
.callout-deprecated { border-color: var(--danger-border); background: var(--danger-soft); }
.callout-danger .callout-title,
.callout-deprecated .callout-title { color: var(--danger); }

.callout-legacy     { border-color: var(--legacy-border); background: var(--legacy-soft); }
.callout-legacy .callout-title { color: var(--legacy); }

.callout .code-block {
  margin-bottom: 0.6rem;
  background: var(--bg);
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: thin;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.55;
}

.table-wrap th {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.table-wrap td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.table-wrap tr:last-child td {
  border-bottom: 0;
}

.table-wrap tbody tr:hover {
  background: var(--bg-subtle);
}

.table-wrap code {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ pager */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pager-link:hover {
  border-color: var(--accent-border);
  background: var(--bg-subtle);
}

.pager-next {
  text-align: right;
  grid-column: 2;
}

.pager-label {
  color: var(--text-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pager-title {
  color: var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* -------------------------------------------------------------------- TOC */

.toc-rail {
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem 0 2.5rem;
  scrollbar-width: thin;
}

.toc-title {
  margin: 0 0 0.4rem;
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

.toc li a {
  display: block;
  padding: 0.2rem 0.7rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.13s ease, border-color 0.13s ease;
}

.toc li.toc-l3 a {
  padding-left: 1.4rem;
  font-size: 0.7813rem;
}

.toc li a:hover {
  color: var(--text);
}

.toc li a.is-current {
  color: var(--accent-text);
  border-left-color: var(--accent);
  font-weight: 550;
}

/* ----------------------------------------------------------------- search */

.search-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: start center;
  padding: 6vh 1rem 1rem;
}

.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(10 12 18 / 0.5);
  backdrop-filter: blur(3px);
}

.search-panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.search-field svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--text-faint);
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

.search-field input::-webkit-search-cancel-button {
  display: none;
}

.search-esc {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-subtle);
  color: var(--text-faint);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.search-results {
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  overflow-y: auto;
}

.search-results li a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.search-results li a:hover,
.search-results li a.is-selected {
  background: var(--accent-soft);
}

.search-result-group {
  display: block;
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-result-title {
  display: block;
  font-weight: 600;
}

.search-result-desc {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty {
  margin: 0;
  padding: 1.5rem 1rem 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* --------------------------------------------------------- home page bits */

.home-hero {
  padding: 0.5rem 0 0;
}

.home-hero h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem);
  font-weight: 740;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-hero .home-sub {
  max-width: 38rem;
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

/* Link-shaped components sit inside .prose, whose `a` rule would otherwise win
   on specificity and paint the primary button accent-on-accent. */
.prose a.button,
.prose a.card {
  text-decoration: none;
}

.prose a.button {
  color: #fff;
}

.prose a.button-secondary {
  color: var(--text);
}

.prose a.card {
  color: inherit;
}

.prose a.card h3 {
  color: var(--accent-text);
}

.button-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.button-secondary:hover {
  background: var(--bg-sunken);
  border-color: var(--border-strong);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.card {
  display: block;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.card:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  text-decoration: none;
}

.card h3 {
  margin: 0 0 0.2rem !important;
  font-size: 0.9375rem !important;
}

.card p {
  margin: 0 !important;
  color: var(--text-muted);
  font-size: 0.8438rem;
  line-height: 1.5;
}

.steps {
  counter-reset: step;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  padding: 0 0 0.7rem 2.25rem;
  border-left: 1px solid var(--border);
  margin-left: 0.8rem;
  margin-bottom: 0;
}

.steps li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -0.8rem;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.badge-current    { border-color: var(--tip-border);    background: var(--tip-soft);    color: var(--tip); }
.badge-legacy     { border-color: var(--legacy-border); background: var(--legacy-soft); color: var(--legacy); }
.badge-deprecated { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.badge-new        { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }

/* --------------------------------------------------------- no-JS fallback */

/* Search, theme switching and the drawer toggle all need JavaScript. Without
   it those controls go away and the drawer sits open in normal flow, so every
   page stays fully navigable. */
.no-js .search-trigger,
.no-js .theme-toggle,
.no-js .nav-toggle {
  display: none;
}

.no-js .drawer {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  max-height: none;
  box-shadow: none;
}

/* ------------------------------------------------------------- responsive */

/* Laptops: the TOC rail is the first thing to go. */
@media (max-width: 1160px) {
  .shell.has-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .toc-rail {
    display: none;
  }
}

/* Below this the six section menus no longer fit beside the brand and the
   search field, so the whole tree moves into the drawer. */
@media (max-width: 1040px) {
  :root {
    --pad-left: 1.5rem;
    --pad-right: 1.5rem;
  }

  .mainnav {
    display: none;
  }

  .drawer {
    display: block;
  }

  .no-js .drawer {
    display: block;
  }

  .nav-toggle {
    display: grid;
  }

  .topbar-inner {
    gap: 0.5rem;
  }

  .brand {
    flex: 1;
  }
}

@media (max-width: 720px) {
  :root {
    --pad-left: 1.1rem;
    --pad-right: 1.1rem;
  }

  .search-trigger span,
  .search-trigger kbd {
    display: none;
  }

  .search-trigger {
    width: 2rem;
    padding: 0;
    justify-content: center;
  }

  .content {
    padding: 1.1rem 0 3rem;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager-next {
    grid-column: 1;
    text-align: left;
  }

  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .brand-name {
    display: none;
  }

  .code-body {
    font-size: 0.7813rem;
    padding: 0.7rem 0.8rem;
  }

  .tab-panels {
    padding: 0.8rem 0.8rem 0.1rem;
  }

  .callout {
    padding: 0.7rem 0.8rem;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 0.45rem 0.6rem;
  }
}

@media print {
  .topbar,
  .drawer,
  .drawer-scrim,
  .toc-rail,
  .pager,
  .search-dialog,
  .code-copy,
  .heading-anchor {
    display: none !important;
  }
  .shell,
  .shell.has-toc {
    display: block;
    padding: 0;
  }
  .prose {
    max-width: none;
  }
}