/* Crossdeck — docs */
:root {
  --ds-bg: #f7f3ec;
  --ds-bg-soft: #faf7f0;
  --ds-canvas: #fbfaf6;
  --ds-surface: #ffffff;
  --ds-surface-soft: #fafaf6;
  --ds-border: rgba(23, 19, 17, 0.09);
  --ds-border-strong: rgba(23, 19, 17, 0.16);
  --ds-divider: rgba(23, 19, 17, 0.06);
  --ds-text: #14110f;
  --ds-text-soft: #2a2421;
  --ds-muted: #6b6259;
  --ds-muted-soft: #948a7e;
  --ds-accent-red: #ff3431;
  --ds-accent: #ff6e45;
  --ds-accent-strong: #ee4f25;
  --ds-accent-warm: #ff8d4b;
  --ds-accent-soft: rgba(255, 110, 69, 0.1);
  --ds-success: #0e7a52;
  --ds-info: #2f5fc3;
  --ds-shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.04);
  --ds-shadow-md: 0 8px 28px rgba(20, 17, 15, 0.06);
  --ds-radius: 10px;
  --ds-radius-sm: 6px;
  --ds-radius-lg: 14px;
  --ds-radius-pill: 999px;
  --ds-mono: "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;
  --ds-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ds-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum";
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; }
::selection { background: rgba(255, 110, 69, 0.22); color: var(--ds-text); }

/* ============ HEADER ============ */
.docs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ds-border);
}

.docs-header-inner {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.docs-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.docs-brand img {
  display: block;
  height: 22px;
  width: auto;
}

/* "Docs" pill — premium read.
   Optical alignment with a 22px logo: padding-block sits the pill at
   ~20px tall, so its baseline matches the wordmark cap height rather
   than its descender. Dot accent uses the brand's accent-strong, the
   same hue that paints nav-link underlines — quiet brand echo, not a
   second logo. Inset top highlight + translucent surface give the pill
   real depth at full zoom without screaming on the rest of the page. */
.docs-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 10px 0 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.docs-brand-tag::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
  flex-shrink: 0;
}

.docs-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  color: var(--ds-text-soft);
  margin-left: 12px;
}

.docs-nav a {
  padding: 6px 12px;
  border-radius: var(--ds-radius-sm);
  font-weight: 500;
  color: var(--ds-text-soft);
  position: relative;
  transition: color 120ms, background 120ms;
}

.docs-nav a:hover {
  color: var(--ds-text);
  background: rgba(23, 19, 17, 0.04);
}

.docs-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1.5px;
  background: var(--ds-accent-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.docs-nav a:hover::after {
  transform: scaleX(1);
}

.docs-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.docs-search-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 32px;
  width: 220px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 140ms;
}

.docs-search-mini:hover { border-color: var(--ds-border-strong); }

.docs-search-mini svg { width: 13px; height: 13px; }

.docs-search-mini .kbd {
  margin-left: auto;
  font-family: var(--ds-mono);
  font-size: 10.5px;
  color: var(--ds-muted-soft);
  border: 1px solid var(--ds-border);
  background: var(--ds-canvas);
  padding: 1px 5px;
  border-radius: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}

.btn:hover {
  border-color: var(--ds-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

.btn-accent {
  background: linear-gradient(180deg, var(--ds-accent) 0%, var(--ds-accent-strong) 100%);
  color: #fff;
  border-color: var(--ds-accent-strong);
}

.btn svg { width: 12px; height: 12px; }

/* ============ PAGE SHELL ============ */
.docs-page {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 56px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ============ HERO ============ */
.docs-hero {
  text-align: center;
  position: relative;
}

/* Radial glow tucked under the sticky header (translucent, blurs
   blend it). The previous `inset: -20px` left a visible ~10px band
   of unaffected page bg between the header bottom edge and the
   gradient top — a third stripe that read as busy. Pulling the
   inset up to -120px tucks the glow's origin behind the header so
   the transition is continuous through the blur. */
.docs-hero::before {
  content: "";
  position: absolute;
  inset: -120px -20px auto -20px;
  height: 380px;
  background: radial-gradient(
    ellipse 50% 60% at 50% 0%,
    rgba(255, 110, 69, 0.14),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.docs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text-soft);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
}

.docs-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
}

.docs-hero h1 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: clamp(36px, 5.4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ds-text);
}

.docs-hero h1 .accent {
  background: linear-gradient(96deg, var(--ds-accent-red), var(--ds-accent), var(--ds-accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.docs-hero-sub {
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--ds-muted);
  line-height: 1.55;
}

/* Big hero search */
.docs-search-big {
  margin: 32px auto 0;
  max-width: 600px;
  position: relative;
}

.docs-search-big input {
  width: 100%;
  height: 52px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  font-size: 15px;
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
  transition: border-color 160ms, box-shadow 160ms;
}

.docs-search-big input::placeholder { color: var(--ds-muted-soft); }

.docs-search-big input:focus {
  outline: 0;
  border-color: var(--ds-accent-strong);
  box-shadow: 0 0 0 4px rgba(238, 79, 37, 0.14);
}

.docs-search-big .ic {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
}

.docs-search-big .kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ds-mono);
  font-size: 11px;
  color: var(--ds-muted-soft);
  border: 1px solid var(--ds-border);
  background: var(--ds-canvas);
  padding: 2px 6px;
  border-radius: 4px;
}

.docs-search-suggestions {
  margin-top: 14px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.docs-search-suggestions span {
  font-size: 11.5px;
  color: var(--ds-muted-soft);
  margin-right: 4px;
}

.docs-search-suggestions a {
  font-size: 12px;
  color: var(--ds-text-soft);
  font-weight: 500;
  padding: 3px 9px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  transition: border-color 140ms, color 140ms;
}

.docs-search-suggestions a:hover {
  color: var(--ds-accent-strong);
  border-color: var(--ds-accent-strong);
}

/* ============ UNIVERSITY LAUNCH CARD ============ */
.docs-uni-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px auto 0;
  max-width: 640px;
  padding: 15px 18px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ds-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.docs-uni-card:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-md); }
.docs-uni-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ds-accent-strong);
  border-radius: var(--ds-radius-pill);
  padding: 3px 9px;
  flex: none;
}
.docs-uni-card-text { flex: 1; text-align: left; }
.docs-uni-card-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--ds-text); }
.docs-uni-card-text span { font-size: 13px; color: var(--ds-muted); }
.docs-uni-card-arrow { color: var(--ds-muted-soft); flex: none; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .docs-uni-card:hover { transform: none; } }

/* ============ SECTION HEAD ============ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ds-text);
}

.section-head p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 14px;
  max-width: 60ch;
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.section-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
}

/* ============ QUICKSTART ============ */
.quickstart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}

.quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-border-strong);
}

.quick-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 110, 69, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}

.quick-card:hover::after { opacity: 1; }

.quick-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  display: grid;
  place-items: center;
}

.quick-icon svg { width: 16px; height: 16px; }

.quick-time {
  font-size: 11px;
  color: var(--ds-muted);
  font-family: var(--ds-mono);
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  padding: 2px 7px;
  border-radius: 999px;
}

.quick-card h3 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
}

.quick-card p {
  margin: 0;
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.5;
}

.quick-link {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
}

.quick-link svg {
  width: 11px;
  height: 11px;
  transition: transform 200ms;
}

.quick-card:hover .quick-link { color: var(--ds-accent-strong); }

.quick-card:hover .quick-link svg { transform: translateX(3px); }

/* ============ CATEGORY GRID ============ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.category-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  /* Sticky .docs-header is ~80px; pad 16px above so a deep doc page's
     "Analytics" chip click lands the card cleanly under the header
     instead of jammed against it. The home doesn't use chip nav, so
     this only matters for the cross-page return path — but it costs
     nothing to be correct everywhere the card is a scroll target. */
  scroll-margin-top: 96px;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-border-strong);
}

.category-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  display: grid;
  place-items: center;
}

.category-icon svg { width: 17px; height: 17px; }

.category-card h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
}

.category-card-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.5;
}

.category-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.category-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ds-text-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--ds-divider);
  transition: color 140ms;
}

.category-list li:last-child a { border-bottom: 0; }

.category-list li a:hover { color: var(--ds-accent-strong); }

.category-list li a svg {
  width: 11px;
  height: 11px;
  color: var(--ds-muted-soft);
  transition: transform 200ms, color 200ms;
}

.category-list li a:hover svg {
  color: var(--ds-accent-strong);
  transform: translateX(2px);
}

/* ============ CODE EXAMPLE ============ */
.code-example {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 12px;
  align-items: stretch;
}

.code-example-copy {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.code-example-copy h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
}

.code-example-copy p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ds-muted);
  line-height: 1.55;
}

.code-example-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.code-example-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-text-soft);
}

.code-example-points li::before {
  content: "→";
  color: var(--ds-accent-strong);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -1px;
}

.code-card {
  background: #14110f;
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--ds-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.code-head .dots { display: inline-flex; gap: 5px; }

.code-head .dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.code-tabs {
  margin-left: auto;
  display: inline-flex;
  gap: 0;
}

.code-tabs button {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}

.code-tabs button:hover { color: rgba(255, 255, 255, 0.85); }

.code-tabs button.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.code-card pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--ds-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  flex: 1;
}

.code-card pre code { font-family: inherit; }

.code-tok-key { color: #d77265; }
.code-tok-fn { color: #ffb479; }
.code-tok-str { color: #92cd89; }
.code-tok-com { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.code-tok-kw { color: #c79bf3; }

.code-pane { display: none; }
.code-pane.is-active { display: block; }

/* ============ AI INSTALL PROMPTS ============ */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ai-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}

.ai-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-border-strong);
}

.ai-tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  display: grid;
  place-items: center;
  color: var(--ds-text);
  flex-shrink: 0;
  font-family: var(--ds-display);
  font-size: 16px;
  font-weight: 600;
}

.ai-card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-card-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}

.ai-card-meta span {
  font-size: 12.5px;
  color: var(--ds-muted);
}

.ai-card-arrow {
  width: 18px;
  height: 18px;
  color: var(--ds-muted-soft);
  flex-shrink: 0;
  transition: transform 200ms, color 200ms;
}

.ai-card:hover .ai-card-arrow {
  color: var(--ds-accent-strong);
  transform: translateX(3px);
}

/* ============ SUPPORT FOOTER ============ */
.docs-support {
  background: var(--ds-text);
  color: #fff;
  border-radius: 16px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.docs-support::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 100% 100%,
    rgba(255, 110, 69, 0.18),
    transparent 60%
  );
  pointer-events: none;
}

.docs-support-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docs-support-copy h3 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.docs-support-copy p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 50ch;
}

.docs-support-actions {
  position: relative;
  display: inline-flex;
  gap: 8px;
}

.docs-support-actions .btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.docs-support-actions .btn:hover { background: rgba(255, 255, 255, 0.1); }

.docs-support-actions .btn-accent {
  background: linear-gradient(180deg, var(--ds-accent), var(--ds-accent-strong));
  border-color: var(--ds-accent-strong);
}

/* ============ FOOTER ============
   Mirrors the front-site .site-footer (styles.css §FOOTER). Keep the
   token references in lockstep so docs.css and styles.css render the
   same chrome — the docs site should feel like a wing of the marketing
   site, not a different building. */
.site-footer {
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.footer-shell {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 48px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.footer-brand {
  font-family: var(--ds-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
}

.footer-tagline {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ds-muted);
  max-width: 30ch;
  line-height: 1.55;
}

.footer-column .footer-heading {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text);
}

.footer-column a {
  display: block;
  font-size: 13px;
  color: var(--ds-muted);
  padding: 4px 0;
  transition: color 120ms;
}

.footer-column a:hover {
  color: var(--ds-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--ds-border);
  font-size: 12px;
  color: var(--ds-muted);
}

.footer-meta {
  display: inline-flex;
  gap: 14px;
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand-block {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============ DOC ARTICLE LAYOUT ============ */
.doc-shell {
  width: min(calc(100% - 32px), 1320px);
  margin: 0 auto;
  padding: 32px 0 80px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  gap: 48px;
  align-items: flex-start;
}

/* Sidebar */
.doc-sidebar {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  font-size: 13px;
  padding-right: 8px;
}

.doc-sidebar::-webkit-scrollbar {
  width: 4px;
}

.doc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(23, 19, 17, 0.16);
  border-radius: 2px;
}

.doc-sidebar h4 {
  margin: 18px 0 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted-soft);
}

.doc-sidebar h4:first-of-type {
  margin-top: 0;
}

/* Back link */
.doc-sidebar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-muted) !important;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}

.doc-sidebar-back:hover {
  color: var(--ds-text) !important;
  background: rgba(23, 19, 17, 0.04);
}

.doc-sidebar-back svg {
  width: 12px;
  height: 12px;
  transition: transform 200ms;
}

.doc-sidebar-back:hover svg {
  transform: translateX(-2px);
}

/* Other sections expander */
.doc-sidebar-other {
  margin-top: 22px;
  border-top: 1px solid var(--ds-divider);
  padding-top: 14px;
}

.doc-sidebar-other summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-muted);
  border-radius: 6px;
  transition: color 120ms, background 120ms;
  user-select: none;
}

.doc-sidebar-other summary::-webkit-details-marker {
  display: none;
}

.doc-sidebar-other summary:hover {
  color: var(--ds-text);
  background: rgba(23, 19, 17, 0.04);
}

.doc-sidebar-other summary .chev {
  width: 11px;
  height: 11px;
  color: var(--ds-muted-soft);
  transition: transform 200ms;
}

.doc-sidebar-other[open] summary .chev {
  transform: rotate(90deg);
}

.doc-sidebar-other ul {
  margin-top: 4px;
}

.doc-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.doc-sidebar a {
  display: block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-soft);
  transition: background 100ms, color 100ms;
}

.doc-sidebar a:hover {
  background: rgba(23, 19, 17, 0.04);
  color: var(--ds-text);
}

.doc-sidebar a.is-active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

/* Article */
.doc-article {
  min-width: 0;
  max-width: 740px;
}

.doc-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ds-muted);
  margin-bottom: 18px;
}

.doc-breadcrumb a {
  color: var(--ds-muted);
  transition: color 120ms;
}

.doc-breadcrumb a:hover {
  color: var(--ds-text);
}

.doc-breadcrumb .sep {
  color: var(--ds-muted-soft);
}

.doc-breadcrumb .current {
  color: var(--ds-text);
  font-weight: 500;
}

.doc-article h1 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ds-text);
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 28px;
  font-size: 12px;
  color: var(--ds-muted);
}

.doc-meta .sep {
  color: var(--ds-muted-soft);
}

.doc-meta .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.doc-meta .pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
}

.doc-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ds-text-soft);
  margin: 0 0 32px;
}

.doc-article h2 {
  margin: 56px 0 12px;
  font-family: var(--ds-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  scroll-margin-top: 80px;
  position: relative;
}

.doc-article h2 .anchor,
.doc-article h3 .anchor {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-muted-soft);
  font-size: 16px;
  opacity: 0;
  transition: opacity 140ms;
  text-decoration: none;
}

.doc-article h2:hover .anchor,
.doc-article h3:hover .anchor {
  opacity: 1;
}

.doc-article h3 {
  margin: 32px 0 8px;
  font-family: var(--ds-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
  scroll-margin-top: 80px;
  position: relative;
}

.doc-article p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-text-soft);
}

.doc-article ul,
.doc-article ol {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-text-soft);
}

.doc-article ul li,
.doc-article ol li {
  margin: 4px 0;
}

.doc-article ul li::marker {
  color: var(--ds-muted-soft);
}

.doc-article a:not(.btn) {
  color: var(--ds-text);
  border-bottom: 1px solid var(--ds-border-strong);
  transition: color 120ms, border-color 120ms;
}

.doc-article a:not(.btn):hover {
  color: var(--ds-accent-strong);
  border-color: var(--ds-accent-strong);
}

.doc-article strong {
  color: var(--ds-text);
  font-weight: 600;
}

.doc-article code:not([class]) {
  font-family: var(--ds-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  color: var(--ds-text);
}

.doc-article hr {
  border: 0;
  border-top: 1px solid var(--ds-divider);
  margin: 40px 0;
}

/* Codeblock with copy */
.doc-codeblock {
  background: #14110f;
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--ds-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 18px 0 24px;
  overflow: hidden;
}

.doc-codeblock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.doc-codeblock-head .lang {
  font-family: var(--ds-mono);
  font-size: 11px;
}

.doc-copy-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}

.doc-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.doc-copy-btn.is-copied {
  color: #57c4a0;
}

.doc-copy-btn svg {
  width: 11px;
  height: 11px;
}

.doc-codeblock pre {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--ds-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

/* Callouts */
/* `.callout` — the lighter callout used by the Prism docs (a bare <svg class="ic">
   + <p> inside). Same failure mode as below: without an explicit svg size the
   browser renders <svg> at 300x150 and the text collapses into a one-word column.
   Constrain the icon and lay it out icon | text. */
.callout {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-info);
  border-radius: 8px;
  background: var(--ds-canvas);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-text-soft);
}
.callout > .ic,
.callout > svg.ic {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--ds-info);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout strong { color: var(--ds-text); font-weight: 600; }

.doc-callout {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--ds-canvas);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-text-soft);
}

.doc-callout > .ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Without an explicit svg size, browsers render <svg> at the default
   300x150 — so a callout icon balloons into a watermark across the
   page. Constrain to 14x14 inside the .ic cell so the icon sits
   neatly inside the rounded square. */
.doc-callout > .ic svg {
  width: 14px;
  height: 14px;
  display: block;
}

.doc-callout-content {
  min-width: 0;
}

.doc-callout-content strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ds-text);
  font-weight: 600;
  font-size: 13.5px;
}

.doc-callout-content p {
  margin: 0;
  font-size: 14px;
  color: var(--ds-text-soft);
}

.doc-callout.is-info {
  border-left-color: var(--ds-info);
}

.doc-callout.is-info > .ic {
  background: var(--ds-info);
}

.doc-callout.is-warn {
  border-left-color: var(--ds-warning);
  background: rgba(176, 105, 18, 0.04);
}

.doc-callout.is-warn > .ic {
  background: var(--ds-warning);
}

.doc-callout.is-tip {
  border-left-color: var(--ds-success);
  background: rgba(14, 122, 82, 0.04);
}

.doc-callout.is-tip > .ic {
  background: var(--ds-success);
}

/* Collapsible <details> block for showing an anonymized preview of a
   generated artifact (the AI prompt, a config file, etc.). Used on
   the AI-setup docs so a skeptical dev can read the prompt before
   pasting. Hairline-bordered card with a clear "Show…" affordance
   on the summary, and a smaller muted footer for caveats inside. */
.doc-details {
  margin: 14px 0 22px;
  padding: 0;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}
.doc-details > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text);
  background: var(--ds-surface);
  list-style: none;
  position: relative;
  user-select: none;
}
.doc-details > summary::-webkit-details-marker { display: none; }
.doc-details > summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  color: var(--ds-muted);
}
.doc-details[open] > summary { border-bottom: 1px solid var(--ds-divider); }
.doc-details[open] > summary::after { content: "−"; }
.doc-details > pre {
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}
.doc-details > .doc-details-foot {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 12px;
  color: var(--ds-muted);
  line-height: 1.5;
  border-top: 1px solid var(--ds-divider);
  background: var(--ds-surface);
}

/* Triage list — "does my app need this?" decision tree. Used at the
   top of docs that don't apply to every app on a project (identify,
   server-side error capture). Each <li> is a branch: condition →
   recommendation. The bold lead reads first; the consequence follows
   inline. Spacing tighter than a normal bullet list so the two
   branches read side-by-side visually, not as a paragraph each. */
.do-i-need {
  margin: 12px 0 18px;
  padding: 16px 18px 16px 36px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-sm);
  list-style: disc;
}
.do-i-need li {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-text);
}
.do-i-need li:last-child { margin-bottom: 0; }
.do-i-need li strong { color: var(--ds-text); font-weight: 600; }

/* Quieter sibling of .doc-callout — used for inline "by the way" notes
   that explain why an example is shaped the way it is. Visually
   subordinate to the code/prose above it (smaller, muted, hairline
   left rule) so it reads as a footnote, not a callout shouting for
   attention. */
.doc-aside {
  margin: 8px 0 16px;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--ds-divider);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-text-soft);
}
.doc-aside strong {
  color: var(--ds-text);
  font-weight: 600;
}

/* Step component */
.doc-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 18px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  margin: 14px 0;
}

.doc-step-num {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ds-text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ds-display);
  margin-top: 2px;
}

.doc-step-body strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ds-text);
  margin-bottom: 2px;
}

.doc-step-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ds-muted);
  line-height: 1.55;
}

/* Key block (public/secret keys) */
.doc-keys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.doc-key-card {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--ds-surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-key-card .label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.doc-key-card .value {
  font-family: var(--ds-mono);
  font-size: 12px;
  color: var(--ds-text);
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-key-card .desc {
  font-size: 12.5px;
  color: var(--ds-muted);
  line-height: 1.5;
  margin: 2px 0 0;
}

.doc-key-card.is-secret .value {
  color: var(--ds-warning);
  border-color: rgba(176, 105, 18, 0.24);
  background: rgba(176, 105, 18, 0.06);
}

/* Reference table */
.doc-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 14px 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.doc-ref-table th {
  background: var(--ds-canvas);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--ds-divider);
}

.doc-ref-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-divider);
  vertical-align: top;
  color: var(--ds-text-soft);
}

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

.doc-ref-table td code {
  font-family: var(--ds-mono);
  font-size: 12px;
  background: var(--ds-canvas);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ds-text);
}

/* TOC */
.doc-toc {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  font-size: 12.5px;
  padding-left: 12px;
  border-left: 1px solid var(--ds-divider);
}

.doc-toc h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted-soft);
}

.doc-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.doc-toc a {
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--ds-muted);
  font-weight: 500;
  transition: color 120ms;
  line-height: 1.4;
}

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

.doc-toc a.is-active {
  color: var(--ds-accent-strong);
}

.doc-toc .toc-sub {
  padding-left: 14px;
  font-size: 12px;
  color: var(--ds-muted-soft);
}

.doc-toc-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-toc-foot a {
  font-size: 12px;
  color: var(--ds-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.doc-toc-foot a:hover {
  color: var(--ds-text);
}

.doc-toc-foot a svg {
  width: 11px;
  height: 11px;
}

/* Prev/Next nav */
.doc-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 64px;
}

.doc-prev-next a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  text-decoration: none;
  border-bottom-width: 1px !important;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}

.doc-prev-next a:hover {
  border-color: var(--ds-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

.doc-prev-next .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.doc-prev-next .label svg {
  width: 12px;
  height: 12px;
}

.doc-prev-next .title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}

.doc-prev-next .pn-prev {
  text-align: left;
}

.doc-prev-next .pn-next {
  text-align: right;
  align-items: flex-end;
}

.doc-prev-next .pn-empty {
  visibility: hidden;
}

/* Bottom feedback */
.doc-feedback {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ds-surface-soft);
  font-size: 13px;
  color: var(--ds-muted);
}

.doc-feedback-actions {
  display: inline-flex;
  gap: 6px;
}

.doc-feedback-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}

.doc-feedback-btn:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
}

.doc-feedback-btn.is-active {
  border-color: var(--ds-accent-strong);
  color: var(--ds-accent-strong);
  background: var(--ds-accent-soft);
}

.doc-feedback-btn svg {
  width: 14px;
  height: 14px;
}

/* Responsive doc layout */
@media (max-width: 1180px) {
  .doc-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
  }
  .doc-toc {
    display: none;
  }
}

@media (max-width: 860px) {
  .doc-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .doc-sidebar {
    position: static;
    max-height: none;
    border-bottom: 1px solid var(--ds-border);
    padding-bottom: 16px;
  }
}

@media (max-width: 600px) {
  /* Collapse the docs nav sidebar on phones so the article body goes
     full-width instead of being squashed above it. The site header + the
     in-page "All docs" trail keep navigation reachable. Desktop untouched. */
  .doc-shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .doc-sidebar {
    display: none;
  }
}

/* ============ COMMAND PALETTE ============ */
.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 15, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.palette-overlay.is-open {
  display: block;
  opacity: 1;
}

.palette-card {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(calc(100% - 32px), 600px);
  max-height: 70vh;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(20, 17, 15, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  z-index: 101;
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease-out, transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.palette-card.is-open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, 0);
}

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-divider);
}

.palette-input-row .ic {
  width: 16px;
  height: 16px;
  color: var(--ds-muted);
  flex-shrink: 0;
}

.palette-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--ds-text);
  padding: 4px 0;
  font-family: var(--ds-sans);
}

.palette-input::placeholder {
  color: var(--ds-muted-soft);
}

.palette-input-row .esc {
  font-family: var(--ds-mono);
  font-size: 11px;
  color: var(--ds-muted-soft);
  border: 1px solid var(--ds-border);
  background: var(--ds-canvas);
  padding: 2px 7px;
  border-radius: 5px;
  cursor: pointer;
}

.palette-input-row .esc:hover {
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
}

.palette-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.palette-group {
  display: flex;
  flex-direction: column;
}

.palette-group-label {
  padding: 10px 12px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted-soft);
}

.palette-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 80ms;
}

.palette-item:hover,
.palette-item.is-active {
  background: var(--ds-canvas);
}

.palette-item.is-active {
  outline: 1px solid var(--ds-border-strong);
  outline-offset: -1px;
}

.palette-item .pic {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  display: grid;
  place-items: center;
  color: var(--ds-text);
}

.palette-item.is-active .pic {
  background: var(--ds-accent-soft);
  border-color: var(--ds-accent-strong);
  color: var(--ds-accent-strong);
}

.palette-item .pic svg {
  width: 13px;
  height: 13px;
}

.palette-item .meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.palette-item .meta .title {
  font-size: 13.5px;
  color: var(--ds-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-item .meta .title mark {
  background: rgba(238, 79, 37, 0.16);
  color: var(--ds-accent-strong);
  padding: 0 1px;
  border-radius: 2px;
}

.palette-item .meta .sub {
  font-size: 11.5px;
  color: var(--ds-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-item .arrow {
  width: 14px;
  height: 14px;
  color: var(--ds-muted-soft);
  opacity: 0;
  transition: opacity 100ms, transform 200ms;
}

.palette-item.is-active .arrow,
.palette-item:hover .arrow {
  opacity: 1;
  color: var(--ds-text);
}

.palette-item.is-active .arrow {
  transform: translateX(2px);
}

.palette-empty {
  padding: 36px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-muted);
}

.palette-empty strong {
  display: block;
  color: var(--ds-text);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.palette-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--ds-divider);
  background: var(--ds-surface-soft);
  font-size: 11.5px;
  color: var(--ds-muted);
}

.palette-foot .legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.palette-foot kbd {
  display: inline-block;
  font-family: var(--ds-mono);
  font-size: 10.5px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  color: var(--ds-text-soft);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .palette-overlay,
  .palette-card { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .quickstart,
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .code-example { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .docs-nav { display: none; }
  .docs-search-mini { width: 160px; }
  .quickstart,
  .category-grid { grid-template-columns: 1fr; }
  .docs-support {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* ============================================================
 * Cookie-policy template page (and any future docs page that
 * needs copy-pasteable snippet blocks + FAQ accordions + a
 * nicely-styled disclosure table)
 * ============================================================ */

/* ----- Snippet block with copy button ----- */
.doc-snippet {
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  margin: 16px 0 22px 0;
}

.doc-snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 14px;
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.doc-snippet pre {
  margin: 0;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  font-family: var(--ds-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-text);
  overflow-x: auto;
  white-space: pre;
}

/* ----- FAQ accordion ----- */
.doc-faq {
  border-top: 1px solid var(--ds-divider);
  padding: 14px 0;
}

.doc-faq:last-of-type {
  border-bottom: 1px solid var(--ds-divider);
}

.doc-faq summary {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ds-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.doc-faq summary::-webkit-details-marker {
  display: none;
}

.doc-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: -2px;
  font-size: 18px;
  color: var(--ds-muted);
  transition: transform 160ms;
}

.doc-faq[open] summary::after {
  content: "−";
}

.doc-faq p {
  margin: 10px 0 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ds-text-soft);
}

/* ----- Disclosure table ----- */
.doc-table-wrap {
  margin: 14px 0 22px 0;
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.doc-table th {
  text-align: left;
  padding: 9px 14px;
  background: var(--ds-canvas);
  border-bottom: 1px solid var(--ds-border);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.doc-table td {
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-divider);
  line-height: 1.55;
  color: var(--ds-text-soft);
  word-wrap: break-word;
}

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

.doc-table td:first-child {
  width: 30%;
}

.doc-table code {
  font-size: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ds-text);
}

/* ----- Next-link footer (article-bottom navigation) ----- */
.doc-next {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--ds-divider);
}

.doc-next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.doc-next-link:hover {
  color: var(--ds-accent-strong);
  border-bottom-color: currentColor;
}

.doc-next-link svg {
  width: 12px;
  height: 12px;
}

/* ----- Article header eyebrow + lead ----- */
.doc-article-head {
  margin-bottom: 22px;
}

.doc-article-head h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 8px 0 12px 0;
}

.doc-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-accent-strong);
}

.doc-article-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
}

/* ----- Callout variant: info (matches our other "is-*" naming) ----- */
.doc-callout-info {
  background: rgba(31, 78, 179, 0.06);
  border: 1px solid rgba(31, 78, 179, 0.2);
  color: #1f3863;
}

.doc-callout-info .doc-callout-icon {
  background: rgba(31, 78, 179, 0.12);
  color: #1f4eb3;
}

/* ----- Section wrapper for long-form docs articles ----- */
.doc-section {
  padding: 28px 0;
  border-top: 1px solid var(--ds-divider);
}

.doc-section:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

.doc-section h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  color: var(--ds-text);
}

.doc-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 18px 0 8px 0;
  color: var(--ds-text);
}

.doc-section p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 12px 0;
  color: var(--ds-text-soft);
}

.doc-section ul,
.doc-section ol {
  margin: 0 0 12px 0;
  padding-left: 22px;
}

.doc-section li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ds-text-soft);
  margin-bottom: 4px;
}

.doc-section a {
  color: var(--ds-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 66, 26, 0.25);
}

.doc-section a:hover {
  border-bottom-color: var(--ds-accent-strong);
}

.doc-section code {
  font-family: var(--ds-mono);
  font-size: 12.5px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  padding: 1px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.doc-section strong {
  font-weight: 600;
  color: var(--ds-text);
}

/* ============================================================
 * Source-maps docs pages — minimal additions for the SetupPrompt
 * shell + the few class names this doc set uses that the rest of
 * the docs site doesn't.
 * ============================================================ */

/* SetupPrompt host on docs pages — slight extra breathing room
   compared to dashboard cards. */
.doc-setup-prompt-shell {
  margin: 18px 0 32px;
  padding: 18px 20px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
}

.doc-setup-prompt-shell--hero {
  margin-top: 24px;
  border-left: 3px solid var(--ds-accent);
}

.doc-setup-prompt-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ds-muted);
  line-height: 1.55;
}

.doc-setup-prompt-foot a {
  color: var(--ds-accent-strong);
  font-weight: 500;
}

/* Sidebar CTA under the section nav — points readers at the
   companion page (manual ↔ AI-setup). */
.doc-sidebar-cta {
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-sidebar-cta p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ds-muted);
}

/* Numbered / bullet lists — tighter than the default doc <ol>. */
.doc-numbered,
.doc-bullet {
  margin: 12px 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ds-text-soft);
}

.doc-numbered li,
.doc-bullet li {
  padding-left: 2px;
}

/* Hairline divider near the foot of a page. */
.doc-rule {
  margin: 28px 0 12px;
  border: 0;
  border-top: 1px solid var(--ds-divider);
}

.doc-foot-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--ds-muted);
}

.doc-foot-meta a {
  color: var(--ds-accent-strong);
  font-weight: 500;
}

/* Permit a direct-child <svg> + <div> structure in callouts
   (the source-maps docs use that shape; older docs use the
   <span class="ic"><svg></span> + <div class="doc-callout-content">
   shape — both should render correctly). */
.doc-callout > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ds-info);
  margin-top: 3px;
}

.doc-callout > div {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ds-text-soft);
}

.doc-callout > div strong {
  color: var(--ds-text);
  font-weight: 600;
}

.doc-callout > div code {
  font-family: var(--ds-mono);
  font-size: 12px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-divider);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--ds-text);
}

.doc-callout > div a {
  color: var(--ds-accent-strong);
  font-weight: 500;
  text-decoration: none;
}

.doc-callout > div a:hover {
  text-decoration: underline;
}

/* ════════ THE doc template — generated chrome (_doc-template.js) ════════ */

/* LEFT: global docs nav */
.doc-nav-group { margin-bottom: 18px; }
.doc-nav-group h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b6259);
}
.doc-nav-group ul { list-style: none; margin: 0; padding: 0; }
.doc-nav-group li a {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted, #6b6259);
  text-decoration: none;
  line-height: 1.45;
}
.doc-nav-group li a:hover { color: var(--ink, #171311); background: rgba(23,19,17,0.04); }
.doc-nav-group li a.is-current {
  color: var(--accent-strong, #c2410c);
  background: rgba(255,110,69,0.08);
  font-weight: 600;
}

/* RIGHT: this page's rail — TOC + actions */
.doc-rail {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  font-size: 12.5px;
}
.doc-rail h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b6259);
}
.doc-rail-toc { list-style: none; margin: 0 0 18px; padding: 0; }
.doc-rail-toc li a {
  display: block;
  padding: 3px 0 3px 10px;
  border-left: 2px solid rgba(23,19,17,0.08);
  color: var(--muted, #6b6259);
  text-decoration: none;
  line-height: 1.5;
}
.doc-rail-toc li a:hover { color: var(--ink, #171311); }
.doc-rail-toc li a.is-active {
  color: var(--accent-strong, #c2410c);
  border-left-color: var(--accent, #ff6e45);
  font-weight: 600;
}
.doc-rail-helpful {
  padding: 14px 0;
  border-top: 1px solid rgba(23, 19, 17, 0.08);
}
.doc-rail-helpful-q { display: block; font-size: 12.5px; font-weight: 600; color: var(--ds-text-soft); margin-bottom: 8px; }
.doc-rail-helpful-btns { display: flex; gap: 8px; }
.doc-rail-helpful-btn {
  flex: 1; height: 30px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); color: var(--ds-text-soft);
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.doc-rail-helpful-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent-strong); }
.doc-rail-helpful-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.doc-rail-helpful-thanks { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ds-muted); }

.doc-rail-actions {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(23,19,17,0.08);
}
.doc-rail-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink, #171311);
  background: #fff;
  border: 1px solid rgba(23,19,17,0.12);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.doc-rail-btn:hover { border-color: var(--accent, #ff6e45); color: var(--accent-strong, #c2410c); }
.doc-rail-btn svg { width: 14px; height: 14px; flex: none; }

/* Pager + slim footer */
.doc-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(23,19,17,0.08);
}
.doc-pager-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid rgba(23,19,17,0.1);
  border-radius: 10px;
  max-width: 46%;
}
.doc-pager-link span { font-size: 11.5px; color: var(--muted, #6b6259); }
.doc-pager-link strong { font-size: 13.5px; color: var(--ink, #171311); }
.doc-pager-link.is-next { margin-left: auto; text-align: right; }
.doc-pager-link:hover { border-color: var(--accent, #ff6e45); }
.doc-slim-foot {
  display: flex;
  gap: 18px;
  margin-top: 26px;
  font-size: 12px;
  color: var(--muted, #6b6259);
}
.doc-slim-foot a { color: var(--muted, #6b6259); }

@media (max-width: 1100px) {
  .doc-rail { display: none; }
}

/* PRINT = the Download-PDF pipeline. The article alone, full width, clean. */
@media print {
  .docs-header, .doc-sidebar, .doc-rail, .doc-pager, .doc-slim-foot,
  .doc-breadcrumb, footer { display: none !important; }
  .doc-shell { display: block; width: 100%; padding: 0; }
  .doc-article { max-width: 100%; }
  body { background: #fff; }
  a { color: inherit; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}

/* ═══════════ DOC TEMPLATE v2 SKIN — the reading experience ═══════════
   The bar: a VP-of-Design-at-Stripe would sign this page. Warm paper, ink
   type, coral used like a scalpel. Reading measure first; chrome whispers. */

html { scroll-behavior: smooth; }
::selection { background: rgba(255, 110, 69, 0.22); }

/* Sticky translucent header — chrome floats, content owns the page. */
.docs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ds-bg, #f7f3ec) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ds-divider, rgba(23,19,17,0.06));
}

/* Reading measure + type scale */
.doc-article { max-width: 760px; min-width: 0; }
.doc-article h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 10px 0 14px;
  color: var(--ds-text, #14110f);
}
.doc-article .doc-lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ds-text-soft, #2a2421);
}
.doc-article p, .doc-article li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ds-text-soft, #2a2421);
}
.doc-article h2 {
  position: relative;
  font-size: 21px;
  letter-spacing: -0.015em;
  margin: 46px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ds-divider, rgba(23,19,17,0.06));
  scroll-margin-top: 92px;
}
.doc-article h2:first-of-type { border-top: 0; padding-top: 0; }
.doc-article h3 {
  font-size: 16.5px;
  margin: 30px 0 10px;
  scroll-margin-top: 92px;
}

/* Heading anchors — visible on hover, click copies the deep link. */
.doc-h-anchor {
  margin-left: 8px;
  border: 0;
  background: none;
  color: var(--ds-accent, #ff6e45);
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
  vertical-align: baseline;
  padding: 0 2px;
}
.doc-article h2:hover .doc-h-anchor { opacity: 1; }
.doc-h-anchor:focus-visible { opacity: 1; outline: 2px solid var(--ds-accent-soft); border-radius: 4px; }

/* Inline code — quiet ink chip */
.doc-article p code, .doc-article li code, .doc-article td code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(23, 19, 17, 0.055);
  border: 1px solid rgba(23, 19, 17, 0.05);
  padding: 1.5px 6px;
  border-radius: 6px;
  color: var(--ds-text, #14110f);
}

/* Code blocks — dark warm panel with a working header. */
.doc-code {
  margin: 18px 0 26px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(23, 19, 17, 0.14);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.doc-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  background: #221b15;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.doc-code-lang {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 226, 0.55);
}
.doc-code-copy {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: none;
  color: rgba(243, 236, 226, 0.85);
  font-size: 11.5px;
  font-weight: 550;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.doc-code-copy:hover { border-color: var(--ds-accent, #ff6e45); color: #fff; }
.doc-code pre {
  margin: 0;
  padding: 16px;
  background: #191512;
  color: #f3ece2;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  overflow-x: auto;
}
.doc-code pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Tables — hairline ledger */
.doc-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: 13.5px;
}
.doc-article th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted, #6b6259);
  padding: 8px 12px;
  border-bottom: 1px solid var(--ds-border-strong, rgba(23,19,17,0.16));
}
.doc-article td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-divider, rgba(23,19,17,0.06));
  vertical-align: top;
  line-height: 1.6;
}
.doc-article tbody tr:hover { background: rgba(23, 19, 17, 0.022); }

/* Left nav: sticky, own scroll, coral inset for the current page */
.doc-sidebar {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 6px;
}
.doc-nav-group li a.is-current {
  box-shadow: inset 2px 0 0 var(--ds-accent, #ff6e45);
  border-radius: 0 6px 6px 0;
}

/* Breadcrumb + meta refinement */
.doc-breadcrumb { font-size: 12px; }
.doc-meta { font-size: 12.5px; }

/* Pager — cards that point where they go */
.doc-pager-link { transition: border-color 130ms ease, transform 130ms ease; }
.doc-pager-link:hover { transform: translateY(-1px); }
.doc-pager-link.is-prev strong::before { content: "← "; color: var(--ds-muted, #6b6259); }
.doc-pager-link.is-next strong::after { content: " →"; color: var(--ds-muted, #6b6259); }

/* Focus discipline */
.doc-article a:focus-visible,
.doc-rail-btn:focus-visible,
.doc-nav-group a:focus-visible {
  outline: 2px solid var(--ds-accent, #ff6e45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print: code blocks keep their chrome-free body */
@media print {
  .doc-code-head, .doc-h-anchor { display: none !important; }
  .doc-code { border: 1px solid #ddd; box-shadow: none; }
  .doc-code pre { background: #f6f4f0; color: #14110f; }
}

/* ════════ CHANGELOG — the page developers land on from release emails ═══ */
.cl-shell { width: min(calc(100% - 32px), 880px); margin: 0 auto; padding: 40px 0 80px; }
.cl-hero h1 { font-size: 38px; letter-spacing: -0.025em; margin: 0 0 10px; }
.cl-hero p { font-size: 15.5px; line-height: 1.7; color: var(--ds-muted, #6b6259); max-width: 64ch; margin: 0 0 22px; }
.cl-hero a { color: var(--ds-accent-strong, #ee4f25); }

.cl-filters { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 64px; z-index: 10; padding: 10px 0; background: color-mix(in srgb, var(--ds-bg, #f7f3ec) 88%, transparent); backdrop-filter: blur(8px); }
.cl-filter { border: 1px solid var(--ds-border, rgba(23,19,17,0.09)); background: var(--ds-surface, #fff); color: var(--ds-muted, #6b6259); font-size: 12.5px; font-weight: 550; padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.cl-filter:hover { color: var(--ds-text, #14110f); border-color: var(--ds-border-strong, rgba(23,19,17,0.16)); }
.cl-filter.is-active { background: var(--ds-text, #14110f); border-color: var(--ds-text, #14110f); color: #fff; }
.cl-search { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 0 9px 0 11px; border: 1px solid var(--ds-border, rgba(23,19,17,0.09)); background: var(--ds-surface, #fff); border-radius: 999px; color: var(--ds-muted, #6b6259); }
.cl-search:focus-within { border-color: var(--ds-border-strong, rgba(23,19,17,0.22)); color: var(--ds-text, #14110f); }
.cl-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--ds-text, #14110f); width: 150px; padding: 6px 0; }
.cl-search input::placeholder { color: var(--ds-muted, #6b6259); }
.cl-search kbd { font: 550 10.5px/1 ui-monospace, "SF Mono", monospace; border: 1px solid var(--ds-border, rgba(23,19,17,0.12)); border-radius: 4px; padding: 2.5px 5px; color: var(--ds-muted, #6b6259); }
.cl-search:focus-within kbd { display: none; }
.cl-empty { text-align: center; color: var(--ds-muted, #6b6259); font-size: 14px; padding: 36px 0; margin: 0; }
.cl-clear { border: 0; background: none; color: var(--ds-accent-strong, #ee4f25); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
::highlight(cl-match) { background: #f6e3a1; color: inherit; }
@media (max-width: 560px) { .cl-search { margin-left: 0; flex: 1 1 100%; } .cl-search input { flex: 1; width: auto; } }

.cl-feed { display: grid; gap: 18px; margin-top: 18px; }
.cl-entry { background: var(--ds-surface, #fff); border: 1px solid var(--ds-border, rgba(23,19,17,0.09)); border-radius: 14px; padding: 20px 22px; scroll-margin-top: 130px; }
.cl-entry:target { border-color: var(--ds-accent, #ff6e45); box-shadow: 0 0 0 3px rgba(255,110,69,0.12); }
.cl-entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cl-chip { font-size: 11px; font-weight: 650; letter-spacing: 0.04em; padding: 2.5px 10px; border-radius: 999px; border: 1px solid var(--ds-border-strong, rgba(23,19,17,0.16)); color: var(--ds-text, #14110f); }
.cl-chip[data-sdk="web"] { border-color: rgba(255,110,69,0.5); color: #c2410c; }
.cl-chip[data-sdk="node"] { border-color: rgba(14,122,82,0.45); color: #0e7a52; }
.cl-chip[data-sdk="react-native"] { border-color: rgba(109,79,195,0.45); color: #6d4fc3; }
.cl-chip[data-sdk="swift"] { border-color: rgba(23,19,17,0.4); color: #14110f; }
.cl-chip[data-sdk="cli"] { border-color: rgba(47,95,195,0.45); color: #2f5fc3; }
.cl-version { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 650; color: var(--ds-text, #14110f); text-decoration: none; }
.cl-version:hover { color: var(--ds-accent-strong, #ee4f25); }
.cl-change { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.cl-change.is-major { background: rgba(179,56,42,0.1); color: #b3382a; }
.cl-change.is-minor { background: rgba(23,19,17,0.07); color: #2a2421; }
.cl-change.is-patch { background: rgba(23,19,17,0.045); color: #6b6259; }
.cl-change.is-initial { background: rgba(14,122,82,0.1); color: #0e7a52; }
.cl-entry-head time { margin-left: auto; font-size: 12.5px; color: var(--ds-muted-soft, #948a7e); font-variant-numeric: tabular-nums; }

.cl-entry-body { font-size: 14.5px; line-height: 1.7; color: var(--ds-text-soft, #2a2421); }
.cl-entry-body p { margin: 0 0 10px; }
.cl-entry-body ul { margin: 0 0 10px; padding-left: 20px; }
.cl-entry-body li { margin: 4px 0; }
.cl-entry-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; background: rgba(23,19,17,0.055); padding: 1px 5px; border-radius: 5px; }
.cl-entry-body pre { background: #191512; color: #f3ece2; border-radius: 10px; padding: 14px; overflow-x: auto; }
.cl-entry-body pre code { background: none; color: inherit; padding: 0; }
.cl-entry-body h4 { font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-muted, #6b6259); margin: 14px 0 6px; }

.cl-entry-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-divider, rgba(23,19,17,0.06)); font-size: 12.5px; }
.cl-install { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: rgba(23,19,17,0.05); padding: 4px 10px; border-radius: 6px; color: var(--ds-text, #14110f); }
.cl-copy { border: 1px solid var(--ds-border, rgba(23,19,17,0.12)); background: none; font-size: 11.5px; font-weight: 550; padding: 3px 10px; border-radius: 6px; cursor: pointer; color: var(--ds-muted, #6b6259); }
.cl-copy:hover { border-color: var(--ds-accent, #ff6e45); color: var(--ds-accent-strong, #ee4f25); }
.cl-entry-foot a { color: var(--ds-muted, #6b6259); margin-left: 4px; }
.cl-entry-foot a:hover { color: var(--ds-accent-strong, #ee4f25); }

.cl-foot { display: flex; gap: 18px; justify-content: center; padding: 24px 0 50px; font-size: 12px; color: var(--ds-muted, #6b6259); }
.cl-foot a { color: var(--ds-muted, #6b6259); }
.cl-foot-sep { color: var(--ds-muted-soft, #948a7e); margin: 0 2px 0 8px; }
.cl-chip[data-sdk="platform"] { background: #14110f; border-color: #14110f; color: #fff; }
.cl-chip[data-sdk="ios"] { border-color: rgba(13,121,134,0.45); color: #0d7986; }

/* ── How identity works — concept-page diagrams (coral as the single accent) ─── */
.idmodel-figure { margin: 26px 0; }
.idmodel-cap { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--ds-muted); }
.idmodel-eyebrow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ds-muted-soft); margin-bottom: 5px; }

/* Chart 1 — the three tiers */
.idmodel-anchor-rule { font-size: 14px; line-height: 1.55; color: var(--ds-text-soft); margin-bottom: 14px; }
.idmodel-tiers { display: flex; flex-direction: column; gap: 10px; }
.idmodel-tier { display: flex; align-items: stretch; gap: 16px; padding: 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; transition: border-color 0.12s ease, transform 0.12s ease; }
.idmodel-tier:hover { transform: translateY(-1px); border-color: var(--ds-border-strong); }
.idmodel-tier:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.idmodel-tier-anchor { flex: 0 0 196px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 14px; border-radius: var(--ds-radius-sm); }
.idmodel-anchor-name { font-weight: 600; font-size: 14px; }
.idmodel-anchor-sub { font-size: 12px; color: var(--ds-muted); }
.idmodel-tier-body { display: flex; flex-direction: column; justify-content: center; }
.idmodel-tier-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.idmodel-tier-meta { font-size: 13px; line-height: 1.55; color: var(--ds-muted); }
.idmodel-tier.is-t1 .idmodel-tier-anchor { background: var(--ds-surface-soft); border: 1px solid var(--ds-border); }
.idmodel-tier.is-t2 { border-left: 3px solid var(--ds-accent-warm); }
.idmodel-tier.is-t2 .idmodel-tier-anchor { background: var(--ds-accent-soft); }
.idmodel-tier.is-t3 { border-left: 3px solid var(--ds-accent-strong); }
.idmodel-tier.is-t3 .idmodel-tier-anchor { background: var(--ds-accent); }
.idmodel-tier.is-t3 .idmodel-anchor-name { color: #fff; }
.idmodel-tier.is-t3 .idmodel-anchor-sub { color: rgba(255, 255, 255, 0.85); }

/* Chart 2 — the Tier 3 stitch flow */
.idmodel-flow-cols { display: flex; gap: 22px; }
.idmodel-flow-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.idmodel-side-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ds-muted-soft); margin-bottom: 8px; }
.idmodel-step { display: block; padding: 12px 14px; text-align: center; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.idmodel-step small { display: block; margin-top: 3px; font-weight: 400; font-size: 12px; color: var(--ds-muted); }
a.idmodel-step { transition: border-color 0.12s ease; }
a.idmodel-step:hover { border-color: var(--ds-accent); }
a.idmodel-step:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.idmodel-step.is-accent { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.idmodel-step.is-pro { border-color: var(--ds-accent-strong); background: var(--ds-accent); color: #fff; }
.idmodel-step.is-pro small { color: rgba(255, 255, 255, 0.85); }
.idmodel-conn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; font-size: 11px; color: var(--ds-muted); }
.idmodel-conn::before { content: "\2193"; color: var(--ds-muted-soft); font-size: 14px; line-height: 1; }
.idmodel-conn small { white-space: nowrap; }
.idmodel-flow-rule { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-accent-strong); border-radius: var(--ds-radius); background: var(--ds-accent-soft); font-size: 13px; line-height: 1.6; color: var(--ds-text-soft); }

/* Router block — the page's payload */
.idmodel-router { margin-top: 8px; padding: 18px 20px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.idmodel-router p { margin: 0 0 12px; font-size: 15px; color: var(--ds-text); }
/* Reuses the house primary button (.btn .btn-accent) for the coral gradient,
   white text, and — critically — the `.btn` exemption from .doc-article's
   link styling. This rule only sizes it up as the page's payload CTA. */
.idmodel-router-cta { height: 40px; padding: 0 18px; border-radius: var(--ds-radius-pill); font-size: 14px; font-weight: 600; gap: 8px; }
.idmodel-router-cta:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.idmodel-router-cta svg { width: 14px; height: 14px; }

/* The article's default link styling (.doc-article a:not(.btn)) must not bleed
   onto the interactive diagram boxes — re-assert their borders + text colour
   at higher specificity so the accent borders and neutral text stay intact. */
.doc-article a.idmodel-tier { color: var(--ds-text); border: 1px solid var(--ds-border); }
.doc-article a.idmodel-tier.is-t2 { border-left: 3px solid var(--ds-accent-warm); }
.doc-article a.idmodel-tier.is-t3 { border-left: 3px solid var(--ds-accent-strong); }
.doc-article a.idmodel-step { color: var(--ds-text); border: 1px solid var(--ds-border); }
.doc-article a.idmodel-step.is-accent { border-color: var(--ds-accent); }

@media (max-width: 640px) {
  .idmodel-tier { flex-direction: column; gap: 10px; }
  .idmodel-tier-anchor { flex: 0 0 auto; }
  .idmodel-flow-cols { flex-direction: column; gap: 8px; }
}

.doc-figure { margin: 2rem 0; }
.doc-figure svg,
.doc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
}
.doc-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ds-muted);
}