/* ==========================================================================
   Docs.css — Documentation site stylesheet (Sprout Cream theme)
   Complete rewrite matching code.claude.com/docs anatomy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cream Theme Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Light mode — mapped to tokens.css design system */
  --docs-bg-primary: var(--gray-50);
  --docs-bg-secondary: var(--gray-25);
  --docs-bg-tertiary: #ecece8;
  --docs-fg-primary: var(--gray-900);
  --docs-fg-secondary: var(--gray-600);
  --docs-fg-tertiary: var(--gray-400);
  --docs-border-primary: #d4d3d1;
  --docs-border-secondary: var(--gray-100);
  --docs-brand: var(--brand-500);
  --docs-brand-emph: var(--brand-600);
  --docs-accent: #7b6ba3;
  --docs-accent-bg: #eeeaf5;
  --docs-border-code: #e6e5e4;
  --docs-success-bg: var(--sprout-100);
  --docs-warning-bg: #F6DCA8;
  --docs-error-bg: #EFC1BD;
  --docs-info-bg: var(--brand-100);
}

/* --------------------------------------------------------------------------
   2. Body Override
   base.css sets body { overflow:hidden; height:100dvh; display:flex;
   flex-direction:column }. Docs pages need normal scrolling.
   -------------------------------------------------------------------------- */
body.docs-page {
  overflow: auto !important;
  height: auto !important;
  display: block !important;
  background: var(--docs-bg-primary);
  font-family: "Inter", system-ui, sans-serif;
  min-height: 100vh;
  padding-top: 112px; /* 64px topbar + 48px tabnav */
}

/* --------------------------------------------------------------------------
   3. Top Nav (.docs-topnav)
   Fixed header: top bar + tab bar, stacked vertically.
   No explicit height — determined by children.
   -------------------------------------------------------------------------- */
.docs-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--docs-bg-primary);
  border-bottom: 1px solid var(--docs-border-secondary);
}

/* -- Top bar: logo, nav links, CTA -- */
.docs-topnav-bar {
  max-width: 92rem;
  margin: 0 auto;
  width: 100%;
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
}

.docs-topnav-bar-border {
  display: flex;
  flex: 1;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  border-bottom: 1px solid var(--docs-border-secondary);
}

/* -- Logo -- */
.docs-topnav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.docs-topnav-logo img {
  display: block;
}

.docs-logo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e0f2fe;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.docs-logo-rive {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  pointer-events: none;
}

.docs-logo-avatar-sm {
  width: 24px;
  height: 24px;
}

.docs-logo-rive-sm {
  top: -15px;
  width: 66px;
  height: 66px;
}

.docs-topnav-logo-suffix {
  font-weight: 500;
  font-size: 16px;
  color: var(--docs-fg-tertiary);
}

/* -- Right nav area -- */
.docs-topnav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -- Nav links -- */
.docs-topnav-link {
  font-size: 14px;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}

.docs-topnav-link:hover {
  color: var(--docs-fg-primary);
}

/* -- CTA button -- */
.docs-topnav-cta {
  background: var(--docs-brand);
  color: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.docs-topnav-cta:hover {
  background: var(--docs-brand-emph);
}

/* -- Mobile hamburger (hidden on desktop) -- */
.docs-mobile-toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Tab Nav (.docs-tabnav)
   48px row of tab links below the top bar.
   -------------------------------------------------------------------------- */
.docs-tabnav {
  display: flex;
  height: 48px;
  align-items: stretch;
  gap: 24px;
  padding: 0 48px;
  max-width: 92rem;
  margin: 0 auto;
  width: 100%;
}

.docs-tab {
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.docs-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: transparent;
  transition: background 0.15s;
}

.docs-tab:hover {
  color: var(--docs-fg-primary);
}

.docs-tab:hover::after {
  background: var(--docs-border-primary);
}

.docs-tab.active {
  color: var(--docs-fg-primary);
  font-weight: 600;
}

.docs-tab.active::after {
  background: var(--docs-fg-primary);
}

/* --------------------------------------------------------------------------
   5. Mobile Menu (.docs-mobile-menu)
   Full-screen overlay: logo + X top, nav items with dividers, CTA at bottom.
   -------------------------------------------------------------------------- */
.docs-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--docs-bg-primary);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.docs-mobile-menu.open {
  pointer-events: auto;
  opacity: 1;
}

.docs-mobile-menu-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.docs-mobile-menu-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--docs-fg-tertiary);
  font-size: 24px;
}

.docs-mobile-menu-body {
  flex: 1;
  padding: 24px 24px 0;
  overflow-y: auto;
}

.docs-mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--docs-fg-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--docs-border-secondary);
}

.docs-mobile-menu-footer {
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.docs-mobile-menu-cta {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--docs-brand);
  text-decoration: none;
  border-radius: 999px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.docs-mobile-menu-cta:hover {
  background: var(--docs-brand-emph);
}

/* --------------------------------------------------------------------------
   6. Mobile Breadcrumb (.docs-mobile-breadcrumb)
   Replaces tab nav on mobile. Shows hamburger + current location.
   Hidden on desktop (>=1024px), shown on mobile (<1024px).
   -------------------------------------------------------------------------- */
.docs-mobile-breadcrumb {
  display: none;
}

.docs-mobile-breadcrumb-icon {
  color: var(--docs-fg-tertiary);
  font-size: 18px;
  flex-shrink: 0;
}

.docs-mobile-breadcrumb-crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.docs-mobile-breadcrumb-group {
  color: var(--docs-fg-secondary);
  flex-shrink: 0;
}

.docs-mobile-breadcrumb-sep {
  color: var(--docs-fg-tertiary);
  flex-shrink: 0;
}

.docs-mobile-breadcrumb-page {
  color: var(--docs-fg-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   7. Mobile Sidebar Overlay
   -------------------------------------------------------------------------- */
.docs-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.docs-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   8. Layout (.docs-layout)
   Horizontal flex below the fixed nav. Matches nav container (92rem + 48px padding).
   -------------------------------------------------------------------------- */
.docs-layout {
  display: flex;
  max-width: 92rem;
  margin: 0 auto;
  margin-top: 112px;
  padding: 0;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   9. Sidebar (.docs-sidebar)
   18rem wide, sticky on desktop; off-canvas drawer on mobile.
   -------------------------------------------------------------------------- */
.docs-sidebar {
  width: calc(18rem + 32px);
  flex-shrink: 0;
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding: 32px 32px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-start;
}

.docs-sidebar-header {
  display: none;
}

.docs-sidebar-section-picker {
  display: none;
}

.docs-sidebar-select {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--docs-fg-primary);
  background: var(--docs-bg-secondary);
  border: 1px solid var(--docs-border-secondary);
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7a8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.docs-sidebar-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--docs-fg-tertiary);
  font-size: 24px;
}

.docs-sidebar-group {
  display: none;
  flex-direction: column;
  gap: 1px;
}

.docs-sidebar-group-active {
  display: flex;
}

.docs-sidebar-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  padding-left: 16px;
  margin-bottom: 10px;
}

.docs-sidebar-item {
  display: flex;
  align-items: flex-start;
  padding: 6px 12px 6px 16px;
  font-size: 14px;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  border-radius: 12px;
  transition: background 150ms ease, color 150ms ease;
  line-height: 1.5;
}

.docs-sidebar-item:hover {
  background: rgba(107, 122, 141, 0.05);
  color: var(--docs-fg-primary);
}

.docs-sidebar-item.active {
  background: var(--docs-bg-tertiary);
  color: var(--docs-fg-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. Content (.docs-content)
   Fills remaining space between sidebar and TOC.
   -------------------------------------------------------------------------- */
.docs-content {
  flex: 1;
  min-width: 0;
  padding: 32px 48px 64px;
}

/* --------------------------------------------------------------------------
   11. Page Header (.docs-page-header)
   -------------------------------------------------------------------------- */
.docs-page-header {
  margin-bottom: 32px;
}

.docs-breadcrumb {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--docs-fg-primary);
}

.docs-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.docs-page-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--docs-fg-primary);
  margin-top: 8px;
  line-height: 1.2;
}

.docs-page-desc {
  font-size: 15px;
  color: var(--docs-fg-secondary);
  margin-top: 8px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. Content Typography
   -------------------------------------------------------------------------- */
.docs-content h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  margin: 48px 0 16px;
  scroll-margin-top: 128px;
}

.docs-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  margin: 48px 0 12px;
}

.docs-content p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--docs-fg-secondary);
  margin-bottom: 16px;
}

.docs-content ul,
.docs-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.docs-content li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--docs-fg-secondary);
  margin-bottom: 4px;
}

.docs-content a:not(.docs-next-page):not(.docs-pattern-card):not(.docs-card) {
  color: var(--docs-fg-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: text-decoration-thickness 150ms ease, color 150ms ease;
}

.docs-content a:not(.docs-next-page):not(.docs-pattern-card):not(.docs-card):hover {
  text-decoration-thickness: 2px;
}

.docs-content strong {
  color: var(--docs-fg-primary);
  font-weight: 600;
}

.docs-content code {
  font-size: 14px;
  background-color: var(--docs-bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   13. Code Block (.docs-codeblock)
   Matches Claude: rounded-2xl, subtle border, floating copy button.
   -------------------------------------------------------------------------- */
.docs-codeblock {
  position: relative;
  border: 1px solid var(--docs-border-code, #dce8f0);
  border-radius: 16px;
  margin-bottom: 48px;
  background: var(--docs-bg-tertiary);
  padding: 4px;
}

.docs-codeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 4px 16px;
  font-size: 12px;
  color: #000000;
}

.docs-codeblock-label {
  font-weight: 500;
  font-family: "Roboto", system-ui, sans-serif;
}

.docs-codeblock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

button.docs-codeblock-copy.material-icons-outlined {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--docs-fg-tertiary);
  font-size: 16px;
  transition: color 150ms ease;
  position: relative;
}

.docs-codeblock-copy:hover {
  color: #000000;
}

.docs-codeblock-copy::after {
  content: "Copy";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--docs-fg-primary);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.docs-codeblock-copy:hover::after {
  opacity: 1;
}

.docs-codeblock-body {
  padding: 14px 16px;
  font-family: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 24px;
  color: #1f2328;
  white-space: pre;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 12px;
}

pre.docs-codeblock-body {
  margin: 0;
}

.docs-codeblock-body code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

/* Syntax highlighting tokens */
.docs-codeblock-body .tok-str { color: #116329; }
.docs-codeblock-body .tok-val { color: #0a3069; }

/* --------------------------------------------------------------------------
   14. Callout (.docs-callout)
   -------------------------------------------------------------------------- */
/* -- Callout: single-line layout (icon + body) -- */
.docs-callout {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 48px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid;
}

.docs-callout.info {
  background: var(--docs-bg-tertiary);
  border-color: var(--docs-border-primary);
}

.docs-callout.tip {
  background: #e8f5ee;
  border-color: #15803d;
}

.docs-callout.note {
  background: var(--docs-bg-tertiary);
  border-color: var(--docs-fg-tertiary);
}

.docs-callout.warning {
  background: #f5f0e6;
  border-color: #a16207;
}

.docs-callout-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 20px;
}

.docs-callout.info .docs-callout-icon,
.docs-callout.note .docs-callout-icon {
  color: var(--docs-fg-tertiary);
}

.docs-callout.tip .docs-callout-icon {
  color: #15803d;
}

.docs-callout.warning .docs-callout-icon {
  color: #a16207;
}

.docs-callout-body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--docs-fg-secondary);
  overflow-wrap: anywhere;
}

.docs-callout-body code {
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   15. Data Table (.docs-table-wrap, .docs-table)
   -------------------------------------------------------------------------- */
.docs-table-wrap {
  overflow-x: auto;
  margin-bottom: 48px;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.docs-table th {
  text-align: left;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 2px solid var(--docs-border-primary);
  color: var(--docs-fg-primary);
}

.docs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--docs-border-secondary);
  color: #000000;
}

.docs-table td a {
  color: var(--docs-fg-primary);
  text-decoration: underline;
  font-weight: 600;
}

.docs-table td a:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   16. Pattern Card (.docs-pattern-card)
   -------------------------------------------------------------------------- */
.docs-pattern-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.docs-pattern-card {
  border: 1px solid var(--docs-border-code, #dce8f0);
  border-radius: 16px;
  padding: 20px;
  background-color: var(--docs-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.docs-pattern-card:hover {
  background-color: var(--docs-bg-tertiary);
}

.docs-pattern-card:hover .docs-pattern-card-icon {
  background: var(--docs-bg-secondary);
}

.docs-pattern-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--docs-bg-tertiary);
  border-radius: 4px;
  width: fit-content;
  color: var(--docs-fg-primary);
  font-size: 20px;
}

.docs-pattern-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  line-height: 24px;
}

.docs-pattern-card-desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--docs-fg-secondary);
}

.docs-pattern-desc {
  font-size: 14px;
  color: var(--docs-fg-secondary);
  line-height: 1.5;
}

.docs-pattern-list {
  list-style: none;
  padding: 0;
}

.docs-pattern-list li {
  font-size: 13px;
  color: var(--docs-fg-tertiary);
  padding: 3px 0;
}

.docs-pattern-list li::before {
  content: "\2022\00a0";
  color: var(--docs-fg-tertiary);
}

.docs-pattern-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-brand);
}

/* --------------------------------------------------------------------------
   19. Page Feedback (.docs-feedback)
   -------------------------------------------------------------------------- */
.docs-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  margin: 32px 0;
  border-top: 1px solid var(--docs-border-secondary);
}

.docs-feedback-buttons {
  display: flex;
  gap: 8px;
}

.docs-feedback-label {
  font-size: 14px;
  color: var(--docs-fg-secondary);
  flex: 1;
}

.docs-feedback-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--docs-border-secondary);
  border-radius: 8px;
  background-color: var(--docs-bg-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000000;
}

.docs-feedback-btn:hover {
  border-color: var(--docs-border-primary);
}

/* --------------------------------------------------------------------------
   20. Next Page Link (.docs-next-page)
   -------------------------------------------------------------------------- */
a.docs-next-page {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}

a.docs-next-page:hover {
  color: var(--docs-fg-primary);
}

.docs-next-page .material-icons-outlined {
  color: var(--docs-fg-tertiary);
  transition: color 150ms ease;
}

a.docs-next-page:hover .material-icons-outlined {
  color: var(--docs-fg-secondary);
}

/* --------------------------------------------------------------------------
   21. Table of Contents (.docs-toc)
   Claude: outer w-[19rem] pl-10, inner w-[16.5rem], text-sm leading-6, space-y-2
   -------------------------------------------------------------------------- */
.docs-toc {
  width: 19rem;
  flex-shrink: 0;
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding-left: 40px;
  padding-top: 32px;
  padding-bottom: 16px;
  display: none;
}

.docs-toc-inner {
  width: 16.5rem;
}

.docs-toc-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-toc-link {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--docs-fg-tertiary);
  text-decoration: none;
  padding: 4px 0;
  transition: color 150ms ease;
}

.docs-toc-link:hover {
  color: var(--docs-fg-primary);
}

.docs-toc-link.active {
  color: var(--docs-fg-primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   22. Footer (.docs-footer)
   -------------------------------------------------------------------------- */
.docs-footer {
  border-top: 1px solid var(--docs-border-secondary);
  padding: 48px 40px 40px 40px;
  background-color: var(--docs-bg-primary);
}

.docs-footer-inner {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 92rem;
  margin: 0 auto;
}

.docs-footer-logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--docs-brand);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.docs-footer-social a {
  color: var(--docs-fg-tertiary);
  transition: color 150ms ease;
}

.docs-footer-social a:hover {
  color: #000000;
}

.docs-footer-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  margin-bottom: 12px;
}

.docs-footer-link {
  display: block;
  font-size: 13px;
  color: var(--docs-fg-secondary);
  text-decoration: none;
  padding: 4px 0;
}

.docs-footer-link:hover {
  color: #000000;
}

.docs-footer-simple {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.docs-footer-simple .docs-footer-logo {
  margin-bottom: 0;
}

.docs-footer-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.docs-footer--green {
  background-color: #2EC07D;
  border-top: none;
  padding: 48px 40px 40px 40px;
}

.docs-footer--green .docs-footer-logo {
  color: #ffffff;
}

.docs-footer--green .docs-footer-logo img {
  filter: brightness(0) invert(1);
}

.docs-footer--green .docs-footer-link {
  color: rgba(255, 255, 255, 0.8);
}

.docs-footer--green .docs-footer-link:hover {
  color: #ffffff;
}

/* ==========================================================================
   23. Responsive Breakpoints
   Following code.claude.com/docs anatomy:
   - xl (>=1280px): sidebar + content + TOC (3-column)
   - lg (1024px-1279px): sidebar + content (2-column, TOC hidden)
   - <1024px: content only (sidebar = off-canvas drawer)
   ========================================================================== */

/* -- xl (>=1280px): show TOC -- */
@media (min-width: 1280px) {
  .docs-toc {
    display: block;
  }
}

/* -- Desktop layout (>640px) -- */
@media (min-width: 641px) {
  .docs-mobile-toggle {
    display: none !important;
  }

  .docs-mobile-breadcrumb {
    display: none;
  }
}

/* -- Mobile layout (<=640px) -- */
@media (max-width: 640px) {
  .docs-topnav-bar {
    padding: 0 16px;
    margin: 0;
  }

  .docs-tabnav {
    display: none;
  }

  .docs-mobile-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--docs-fg-tertiary);
  }

  .docs-topnav-bar-border {
    border-bottom: none;
  }

  .docs-mobile-breadcrumb {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 16px 20px;
    margin-top: 64px;
    background: var(--docs-bg-primary);
    border: none;
    border-bottom: 1px solid var(--docs-border-secondary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: sticky;
    top: 64px;
    z-index: 50;
  }

  .docs-layout {
    margin-top: 0;
    padding: 0;
  }

  .docs-sidebar {
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    max-height: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    background: var(--docs-bg-primary);
    padding: 0;
    top: 0;
    align-self: auto;
  }

  .docs-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 64px;
    flex-shrink: 0;
  }

  .docs-sidebar-section-picker {
    display: block;
    padding: 8px 24px 16px;
  }

  .docs-sidebar-heading {
    padding-left: 24px;
  }

  .docs-sidebar-item {
    padding-left: 24px;
    padding-right: 24px;
  }

  .docs-sidebar.open {
    opacity: 1;
    pointer-events: auto;
  }

  .docs-content {
    padding: 24px 20px 48px;
  }

  .docs-pattern-cards {
    grid-template-columns: 1fr;
  }

  .docs-cards {
    grid-template-columns: 1fr;
  }
}

/* -- Below 640px: hide nav links/CTA (hamburger takes over) -- */
@media (max-width: 640px) {
  .docs-topnav-link,
  .docs-topnav-cta {
    display: none;
  }
}

/* -- Below 768px: smaller screen tweaks -- */
@media (max-width: 767px) {
  .docs-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* -- Below 480px: smallest screens -- */
@media (max-width: 479px) {
  .docs-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* 21. Tabbed examples (.docs-tabs) */
.docs-tabs { margin: 20px 0; }
.docs-tabs-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--docs-border-primary);
  margin-bottom: 16px;
}
.docs-tab-btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--docs-fg-secondary);
  padding: 8px 14px;
  position: relative;
  border-radius: 8px 8px 0 0;
}
.docs-tab-btn:hover { color: var(--docs-fg-primary); background: var(--docs-bg-secondary); }
.docs-tab-btn.active { color: var(--docs-fg-primary); font-weight: 600; }
.docs-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--docs-brand, var(--docs-fg-primary));
}
.docs-tab-panel { display: none; }
.docs-tab-panel.active { display: block; }

/* "Now you can" callout — page-end summary, Start pages */
.docs-now-you-can {
  margin: 32px 0 16px;
  padding: 16px 18px;
  background: var(--docs-bg-secondary, #f6f8fa);
  border-left: 3px solid var(--docs-brand, #86cb3c);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  color: var(--docs-fg-primary);
}
.docs-now-you-can strong { color: var(--docs-fg-primary); }

/* Card grid — landing-style pages (Overview) */
.docs-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
.docs-card {
  display: block;
  padding: 20px 22px;
  background: var(--docs-bg-secondary);
  border: 1px solid var(--docs-border-primary);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.docs-card:hover {
  border-color: var(--docs-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 13, 18, 0.05);
}
.docs-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--docs-fg-primary);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-card-desc {
  font-size: 14px;
  color: var(--docs-fg-secondary);
  line-height: 1.55;
  margin: 0;
}
.docs-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-brand-emph);
  background: rgba(11, 165, 236, 0.10);
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1;
}
.docs-card-lead {
  grid-column: 1 / -1;
}
.docs-card-code {
  display: block;
  background: var(--docs-bg-tertiary);
  border: 1px solid var(--docs-border-code);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--docs-fg-primary);
  margin: 14px 0 0 0;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}
.docs-card-code code { background: none; padding: 0; }
@media (max-width: 768px) {
  .docs-card-grid { grid-template-columns: 1fr; }
}

/* Overview / landing layout — drop the left sidebar, content goes wider */
.docs-page-landing .docs-sidebar { display: none; }
.docs-page-landing .docs-mobile-breadcrumb { display: none; }
.docs-page-landing .docs-content { padding: 32px 64px 64px; }
@media (max-width: 768px) {
  .docs-page-landing .docs-content { padding: 24px 20px 40px; }
}

/* Sidebar subitem — indented under a parent entry (e.g., nouns under "The nouns") */
.docs-sidebar-subitem {
  padding-left: 32px;
  font-size: 13px;
  color: var(--docs-fg-tertiary);
}
.docs-sidebar-subitem:hover {
  color: var(--docs-fg-secondary);
}
.docs-sidebar-subitem.active {
  color: var(--docs-fg-primary);
}

/* Sidebar sub-heading — non-link section divider inside a group (e.g., Tools / Subscriptions under Reference) */
.docs-sidebar-subheading {
  padding: 14px 12px 4px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--docs-fg-tertiary);
}

/* Sidebar sub-heading as a link (clickable section) */
a.docs-sidebar-subheading-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
a.docs-sidebar-subheading-link:hover {
  color: var(--docs-fg-secondary);
}
a.docs-sidebar-subheading-link.active {
  color: var(--docs-fg-primary);
}

/* ==========================================================================
   Dark mode
   Applied via [data-theme="dark"] on <html> (set inline before paint by the
   theme-init script in each docs page's <head>). Defaults to OS preference
   via @media (prefers-color-scheme: dark) when no manual choice is stored.
   ========================================================================== */

html[data-theme="dark"] {
  /* Dark mode — inverted gray scale from tokens.css */
  --docs-bg-primary: var(--gray-950);
  --docs-bg-secondary: var(--gray-900);
  --docs-bg-tertiary: var(--gray-800);
  --docs-fg-primary: var(--gray-100);
  --docs-fg-secondary: var(--gray-300);
  --docs-fg-tertiary: var(--gray-500);
  --docs-border-primary: var(--gray-800);
  --docs-border-secondary: var(--gray-900);
  --docs-brand: var(--brand-400);
  --docs-brand-emph: var(--brand-300);
  --docs-accent: #a89bc7;
  --docs-accent-bg: #1f1a2a;
  --docs-border-code: var(--gray-800);
  --docs-success-bg: rgba(134, 203, 60, 0.18);
  --docs-warning-bg: rgba(246, 220, 168, 0.18);
  --docs-error-bg: rgba(239, 193, 189, 0.18);
  --docs-info-bg: rgba(28, 181, 252, 0.14);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --docs-bg-primary: var(--gray-950);
    --docs-bg-secondary: var(--gray-900);
    --docs-bg-tertiary: var(--gray-800);
    --docs-fg-primary: var(--gray-100);
    --docs-fg-secondary: var(--gray-300);
    --docs-fg-tertiary: var(--gray-500);
    --docs-border-primary: var(--gray-800);
    --docs-border-secondary: var(--gray-900);
    --docs-brand: var(--brand-400);
    --docs-brand-emph: var(--brand-300);
    --docs-accent: #a89bc7;
    --docs-accent-bg: #1f1a2a;
    --docs-border-code: var(--gray-800);
    --docs-success-bg: rgba(134, 203, 60, 0.18);
    --docs-warning-bg: rgba(246, 220, 168, 0.18);
    --docs-error-bg: rgba(239, 193, 189, 0.18);
    --docs-info-bg: rgba(28, 181, 252, 0.14);
    color-scheme: dark;
  }
}

/* Code blocks: hardcoded light values in the base, override here.
   Manual toggle path: html[data-theme="dark"] */
html[data-theme="dark"] .docs-codeblock-body { background: var(--gray-900); color: var(--gray-100); }
html[data-theme="dark"] .docs-codeblock-header { color: var(--docs-fg-secondary); }
html[data-theme="dark"] .docs-codeblock-copy:hover { color: var(--docs-fg-primary); }
html[data-theme="dark"] .docs-codeblock-body .tok-str { color: #88c270; }
html[data-theme="dark"] .docs-codeblock-body .tok-val { color: #82aaff; }
/* OS-pref dark fallback (only when user hasn't manually picked light) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-codeblock-body { background: var(--gray-900); color: var(--gray-100); }
  html:not([data-theme="light"]) .docs-codeblock-header { color: var(--docs-fg-secondary); }
  html:not([data-theme="light"]) .docs-codeblock-copy:hover { color: var(--docs-fg-primary); }
  html:not([data-theme="light"]) .docs-codeblock-body .tok-str { color: #88c270; }
  html:not([data-theme="light"]) .docs-codeblock-body .tok-val { color: #82aaff; }
}

/* Theme toggle button — injected by docs.js into .docs-topnav-right */
.docs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--docs-fg-tertiary);
  cursor: pointer;
  transition: color 150ms ease;
  font-family: "Material Icons Outlined";
  font-size: 20px;
  line-height: 1;
}
.docs-theme-toggle:hover {
  color: var(--docs-fg-primary);
  background: var(--docs-bg-secondary);
}

/* Sweep: every place the light theme hardcodes #000000 / #ffffff / pale bgs
   needs an explicit dark-mode override since the var() system never sees them. */
html[data-theme="dark"] .docs-codeblock-header,
html[data-theme="dark"] .docs-codeblock-copy:hover,
html[data-theme="dark"] .docs-table th,
html[data-theme="dark"] .docs-feedback-btn,
html[data-theme="dark"] .docs-footer-social a:hover,
html[data-theme="dark"] .docs-footer-link:hover {
  color: var(--docs-fg-primary);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-codeblock-header,
  html:not([data-theme="light"]) .docs-codeblock-copy:hover,
  html:not([data-theme="light"]) .docs-table th,
  html:not([data-theme="light"]) .docs-feedback-btn,
  html:not([data-theme="light"]) .docs-footer-social a:hover,
  html:not([data-theme="light"]) .docs-footer-link:hover {
    color: var(--docs-fg-primary);
  }
}

/* Callouts: light pastels look harsh on dark. Tint translucent. */
html[data-theme="dark"] .docs-callout-success { background: rgba(21, 128, 61, 0.14); border-color: rgba(21, 128, 61, 0.4); }
html[data-theme="dark"] .docs-callout-warning { background: rgba(161, 98, 7, 0.14); border-color: rgba(161, 98, 7, 0.4); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-callout-success { background: rgba(21, 128, 61, 0.14); border-color: rgba(21, 128, 61, 0.4); }
  html:not([data-theme="light"]) .docs-callout-warning { background: rgba(161, 98, 7, 0.14); border-color: rgba(161, 98, 7, 0.4); }
}

/* Pale brand info bg (#e0f2fe) gets lost on dark; lift to translucent brand. */
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background: #e0f2fe"] {
  background: rgba(11, 165, 236, 0.12) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) [style*="background:#e0f2fe"],
  html:not([data-theme="light"]) [style*="background: #e0f2fe"] {
    background: rgba(11, 165, 236, 0.12) !important;
  }
}

/* Skill chip "in-prod" status text is hardcoded olive green (#5a8a26)
   on the light cream theme. On dark, lift to a brighter sprout. */
html[data-theme="dark"] .docs-skill-chip-status.in-prod,
html[data-theme="dark"] .skill-status.in-prod {
  background: rgba(134, 203, 60, 0.22);
  color: #b2dc7a;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-skill-chip-status.in-prod,
  html:not([data-theme="light"]) .skill-status.in-prod {
    background: rgba(134, 203, 60, 0.22);
    color: #b2dc7a;
  }
}

/* ── Dark-mode pass 2 ──
   Callouts with hardcoded pastel backgrounds (.warning, .tip) and the
   .docs-table td { color: #000 } rule were missed in the first sweep.
   These pages were rendering with pale-cream callouts on a near-black
   page (jarring) and table cells with black text inside dark code chips
   (unreadable). Fix both for manual data-theme AND OS-pref dark.
*/

/* warning callout: dark amber wash */
html[data-theme="dark"] .docs-callout.warning {
  background: rgba(161, 98, 7, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}
html[data-theme="dark"] .docs-callout.warning .docs-callout-icon { color: #f59e0b; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-callout.warning {
    background: rgba(161, 98, 7, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
  }
  html:not([data-theme="light"]) .docs-callout.warning .docs-callout-icon { color: #f59e0b; }
}

/* tip callout: dark mint wash */
html[data-theme="dark"] .docs-callout.tip {
  background: rgba(21, 128, 61, 0.14);
  border-color: rgba(74, 222, 128, 0.45);
}
html[data-theme="dark"] .docs-callout.tip .docs-callout-icon { color: #4ade80; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-callout.tip {
    background: rgba(21, 128, 61, 0.14);
    border-color: rgba(74, 222, 128, 0.45);
  }
  html:not([data-theme="light"]) .docs-callout.tip .docs-callout-icon { color: #4ade80; }
}

/* table cells: the base rule is `color: #000000`. Flip to fg-primary so
   inline <code> chips inside cells (which use --docs-bg-tertiary background
   in dark mode) keep text-against-bg contrast. */
html[data-theme="dark"] .docs-table td { color: var(--docs-fg-primary); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .docs-table td { color: var(--docs-fg-primary); }
}