/* ==========================================================================
   Wiro Docs — design-system checkpoint
   --------------------------------------------------------------------------
   This layer adapts the current Wiro-Web token and component contracts to the
   static Docs runtime. It intentionally sits after docs.css so the checkpoint
   can be removed without rewriting the legacy stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Current Wiro design tokens
   Source: Wiro-Web/src/scss/wiro-design-system/_tokens.scss
   -------------------------------------------------------------------------- */
:root {
  --wiro-sans: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --wiro-mono: "JetBrains Mono", monospace;
  --wiro-font-mono: var(--wiro-mono);

  --wiro-type-title-size: 15px;
  --wiro-type-title-weight: 650;
  --wiro-type-title-letter: -0.02em;
  --wiro-type-title-line: 1.25;
  --wiro-type-metric-lg-size: 30px;
  --wiro-type-metric-md-size: 22px;
  --wiro-type-metric-sm-size: 18px;
  --wiro-type-metric-weight: 650;
  --wiro-type-metric-letter: -0.035em;
  --wiro-type-metric-line: 1.1;
  --wiro-type-row-size: 13px;
  --wiro-type-row-weight: 550;
  --wiro-type-row-line: 1.45;
  --wiro-type-meta-size: 12.5px;
  --wiro-type-meta-line: 1.5;
  --wiro-type-caption-size: 12px;
  --wiro-type-micro-size: 11px;
  --wiro-type-eyebrow-size: 10.5px;
  --wiro-type-eyebrow-weight: 500;
  --wiro-type-eyebrow-letter: 0.06em;
  --wiro-type-eyebrow-line: 1.2;
  --wiro-type-table-head-letter: 0.04em;
  --wiro-type-button-sm-size: 12.5px;
  --wiro-type-button-weight: 500;
  --wiro-type-empty-title-size: 15px;
  --wiro-type-empty-compact-title-size: 14px;
  --wiro-type-empty-description-size: 13px;
  --wiro-type-page-title-size: 25px;
  --wiro-type-page-subtitle-size: 13.5px;

  --wiro-bg: #f9f8f5;
  --wiro-bg-warm: #f2efe8;
  --wiro-bg-stone: #edeae2;
  --wiro-bg-hover: #f4f1ea;
  --wiro-surface: #fff;
  --wiro-header-bg: rgb(249 248 245 / 88%);
  --wiro-announce-bg: linear-gradient(90deg, #eef5ee 0%, #f4f0f7 100%);
  --wiro-surface-frost: rgb(255 255 255 / 86%);
  --wiro-ink: #16140f;
  --wiro-ink2: #3d3a33;
  --wiro-ink3: #706c62;
  --wiro-ink4: #a8a49a;
  --wiro-ink-hover: #2a2820;
  --wiro-border: rgb(22 20 15 / 7%);
  --wiro-border-med: rgb(22 20 15 / 11%);
  --wiro-border-strong: rgb(22 20 15 / 20%);
  --wiro-dark: #16140f;
  --wiro-dark-surface: #1e1c16;
  --wiro-dark-border: rgb(255 255 255 / 7%);
  --wiro-dark-border-med: rgb(255 255 255 / 11%);
  --wiro-green: #2e7d52;
  --wiro-green-mid: #3a9463;
  --wiro-green-strong: #3f9e68;
  --wiro-green-bg: rgb(46 125 82 / 8%);
  --wiro-green-text: #1e5c38;
  --wiro-green-bright: #4caf76;
  --wiro-green-border: rgb(46 125 82 / 24%);
  --wiro-danger-text: #b3471e;
  --wiro-danger: #c05050;
  --wiro-danger-bg: rgb(179 71 30 / 8%);
  --wiro-danger-border: rgb(179 71 30 / 24%);
  --wiro-amber: #c99a40;
  --wiro-amber-text: #7a5010;
  --wiro-amber-bg: rgb(201 154 64 / 10%);
  --wiro-blue: #3b64b4;
  --wiro-blue-bg: rgb(74 109 140 / 12%);
  --wiro-on-dark: #f9f8f5;

  --wiro-radius: 0.25rem;
  --wiro-radius-sm: calc(var(--wiro-radius) - 2px);
  --wiro-radius-md: var(--wiro-radius);
  --wiro-radius-lg: calc(var(--wiro-radius) + 2px);
  --wiro-radius-xl: calc(var(--wiro-radius) + 4px);
  --wiro-radius-2xl: calc(var(--wiro-radius) + 6px);
  --wiro-radius-3xl: calc(var(--wiro-radius) + 8px);
  --wiro-radius-4xl: calc(var(--wiro-radius) + 10px);
  --wiro-radius-control: 0.5rem;
  --wiro-radius-chip: 0.375rem;

  --wiro-hover-bg: rgb(22 20 15 / 4%);
  --wiro-hover-border: rgb(22 20 15 / 12%);
  --wiro-focus-ring: 0 0 0 2px rgb(42 41 35 / 8%);
  --wiro-transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
  --wiro-scroll-thumb: rgb(22 20 15 / 14%);
  --wiro-scroll-thumb-hover: rgb(22 20 15 / 24%);
  --wiro-scroll-size: 6px;

  --wiro-z-modal: 7000;
  --wiro-z-popover: 7050;
  --wiro-z-lightbox: 7100;
  --wiro-shadow-sm: 0 1px 2px rgb(22 20 15 / 5%);
  --wiro-shadow-soft: 0 14px 34px rgb(22 20 15 / 8%);

  --wiro-code-bg: var(--wiro-bg-warm);
  --wiro-code-surface: var(--wiro-surface);
  --wiro-code-border: var(--wiro-border);
  --wiro-code-inline-bg: var(--wiro-bg-stone);
  --wiro-code-fg: var(--wiro-ink);
  --wiro-code-punct: var(--wiro-ink3);
  --wiro-code-name: var(--wiro-ink2);
  --wiro-code-comment: #8b877d;
  --wiro-code-keyword: #5f594a;
  --wiro-code-string: #2e7d52;
  --wiro-code-number: #9a6a32;

  --wiro-code-ondark-bg: #131210;
  --wiro-code-ondark-inset: #0e0d0b;
  --wiro-code-ondark-surface: var(--wiro-dark-surface);
  --wiro-code-ondark-border: var(--wiro-dark-border);
  --wiro-code-ondark-fg: #e8e5df;
  --wiro-code-ondark-punct: #8b877d;
  --wiro-code-ondark-name: #e8e5df;
  --wiro-code-ondark-comment: #5c5a52;
  --wiro-code-ondark-keyword: #7ba8d4;
  --wiro-code-ondark-string: #8fbf7a;
  --wiro-code-ondark-number: #cf9060;
  --wiro-code-ondark-method: #6baae0;
  --wiro-code-ondark-link: #a5d6ff;

  --wiro-public-max-width: 1280px;
  --wiro-public-page-x: 40px;
  --wiro-public-page-x-mobile: 18px;

  --wiro-brand-filter-light: none;
  --wiro-brand-filter-dark: invert(1);
  --wiro-brand-filter: var(--wiro-brand-filter-light);
}

html.wiro-dark {
  color-scheme: dark;
  --wiro-bg: #12100d;
  --wiro-bg-warm: #191713;
  --wiro-bg-stone: #211f19;
  --wiro-bg-hover: #1d1b16;
  --wiro-surface: #171510;
  --wiro-header-bg: rgb(18 16 13 / 88%);
  --wiro-announce-bg: linear-gradient(90deg, #14201a 0%, #1b1626 100%);
  --wiro-surface-frost: rgb(33 31 25 / 86%);
  --wiro-ink: #f7f3ea;
  --wiro-ink2: #d8d1c5;
  --wiro-ink3: #aaa297;
  --wiro-ink4: #746f66;
  --wiro-ink-hover: #e9e3d7;
  --wiro-border: rgb(247 243 234 / 7.5%);
  --wiro-border-med: rgb(247 243 234 / 12%);
  --wiro-border-strong: rgb(247 243 234 / 22%);
  --wiro-dark: #0e0d0a;
  --wiro-dark-surface: #171510;
  --wiro-dark-border: rgb(247 243 234 / 7%);
  --wiro-dark-border-med: rgb(247 243 234 / 12%);
  --wiro-green: #4caf76;
  --wiro-green-mid: #63c58c;
  --wiro-green-strong: #63c58c;
  --wiro-green-bg: rgb(76 175 118 / 13%);
  --wiro-green-text: #80d8a2;
  --wiro-green-bright: #79e0a0;
  --wiro-green-border: rgb(76 175 118 / 32%);
  --wiro-danger-text: #e08960;
  --wiro-danger: #d9776b;
  --wiro-danger-bg: rgb(224 137 96 / 15%);
  --wiro-danger-border: rgb(224 137 96 / 30%);
  --wiro-amber: #dcae55;
  --wiro-amber-text: #dcae55;
  --wiro-amber-bg: rgb(220 174 85 / 16%);
  --wiro-blue: #6f97e0;
  --wiro-blue-bg: rgb(111 151 224 / 18%);
  --wiro-hover-bg: rgb(247 243 234 / 6%);
  --wiro-hover-border: rgb(247 243 234 / 14%);
  --wiro-focus-ring: 0 0 0 2px rgb(247 243 234 / 10%);
  --wiro-scroll-thumb: rgb(247 243 234 / 14%);
  --wiro-scroll-thumb-hover: rgb(247 243 234 / 24%);
  --wiro-code-bg: var(--wiro-bg-warm);
  --wiro-code-surface: var(--wiro-surface);
  --wiro-code-border: var(--wiro-border);
  --wiro-code-inline-bg: var(--wiro-bg-stone);
  --wiro-code-fg: var(--wiro-ink);
  --wiro-code-punct: var(--wiro-ink3);
  --wiro-code-name: var(--wiro-ink2);
  --wiro-code-comment: #5c5a52;
  --wiro-code-keyword: #7ba8d4;
  --wiro-code-string: #8fbf7a;
  --wiro-code-number: #cf9060;
  --wiro-brand-filter: var(--wiro-brand-filter-dark);
}

/* --------------------------------------------------------------------------
   2. Global foundation and shell
   -------------------------------------------------------------------------- */
html {
  color-scheme: light;
  background: var(--wiro-bg);
}

body {
  color: var(--wiro-ink);
  background: var(--wiro-bg);
  font-family: var(--wiro-sans);
  font-weight: 400;
  text-rendering: optimizelegibility;
}

button,
input,
select,
textarea {
  font-family: var(--wiro-sans);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--wiro-focus-ring);
}

/* Keep Wiro-Web's exact WebKit-only 6px, trackless scrollbar geometry. Docs
   additionally drives the tokenized thumb color from app.js so each scroll
   surface can reveal and fade independently without shifting layout. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--wiro-scroll-size);
  height: var(--wiro-scroll-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--wiro-docs-scroll-thumb-color, transparent);
}

/* Undo the legacy Docs declarations so the canonical WebKit treatment above
   controls every visible vertical scroll surface. */
.docs-nav,
.docs-center,
.docs-right-panel,
.docs-search-results {
  scrollbar-color: auto;
  scrollbar-width: auto;
}

.docs-layout {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  background: var(--wiro-bg);
  color: var(--wiro-ink);
}

.docs-main {
  min-height: 0;
  padding-top: 60px;
  background: var(--wiro-bg);
}

.docs-page,
.docs-content-area {
  min-height: 0;
  background: var(--wiro-bg);
}

/* --------------------------------------------------------------------------
   3. Compact Docs topbar — static Wiro header adapter
   -------------------------------------------------------------------------- */
.docs-header {
  position: fixed;
  inset: 0 0 auto 288px;
  z-index: 6000;
  height: 60px;
  border-bottom: 1px solid var(--wiro-border);
  background: color-mix(in srgb, var(--wiro-bg) 78%, transparent);
  color: var(--wiro-ink);
  font-family: var(--wiro-sans);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.docs-header-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 24px;
}

.docs-header-leading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 60px;
}

.docs-header-brand {
  display: inline-flex;
  align-items: center;
  height: 60px;
}

.docs-header-brand img {
  display: block;
  width: auto;
  height: 16px;
  filter: var(--wiro-brand-filter);
}

.docs-header-divider {
  width: 1px;
  height: 18px;
  margin: 0 10px;
  background: var(--wiro-border-med);
}

.docs-header-product {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--wiro-ink3);
  font-size: 13.5px;
  text-decoration: none;
}

.docs-header-product-root {
  flex: 0 0 auto;
  color: var(--wiro-ink4);
  font-weight: 500;
}

.docs-header-product-sep {
  flex: 0 0 auto;
  color: var(--wiro-ink4);
}

.docs-header-product-page {
  min-width: 0;
  overflow: hidden;
  color: var(--wiro-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.docs-header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.docs-header-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 4px;
  color: var(--wiro-ink3);
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: var(--wiro-transition);
}

.docs-header-nav-link:hover {
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
  text-decoration: none;
}

/* Static counterpart of WiroThemeToggle's full icon variant. */
.docs-theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
}

.docs-theme-toggle:hover {
  border-color: var(--wiro-border-med);
  color: inherit;
}

.docs-theme-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--wiro-radius-control) - 3px);
  background: transparent;
  color: var(--wiro-ink4);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--wiro-transition);
}

.docs-theme-option:hover {
  color: var(--wiro-ink2);
}

.docs-theme-option.is-active {
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink);
}

.docs-theme-option i {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   4. Sidebar — styleguide navigation contract
   -------------------------------------------------------------------------- */
.docs-nav-wrapper {
  height: 100%;
}

.docs-nav {
  width: 288px;
  min-width: 288px;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--wiro-border);
  background: var(--wiro-surface);
  color: var(--wiro-ink);
}

.docs-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.docs-nav-brand {
  flex: 0 0 60px;
  justify-content: space-between;
  gap: 8px;
  height: 60px;
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--wiro-border);
}

.docs-nav-brand-lockup,
.docs-nav-md-actions {
  display: flex;
  align-items: center;
}

.docs-nav-brand-lockup {
  gap: 9px;
  min-width: 0;
}

.docs-nav-md-actions {
  flex: 0 0 auto;
  gap: 4px;
  margin-left: auto;
}

.docs-nav-md-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  color: var(--wiro-ink4);
  font-size: 13px;
  text-decoration: none;
  transition: var(--wiro-transition);
}

.docs-nav-md-action:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
  text-decoration: none;
}

.docs-nav-logo img {
  height: 16px;
  filter: var(--wiro-brand-filter);
}

.docs-nav-label {
  padding: 0 0 0 9px;
  border-left: 1px solid var(--wiro-border-med);
  border-radius: 0;
  background: transparent;
  color: var(--wiro-ink3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.docs-nav-group {
  padding: 8px 10px;
}

.docs-nav-group-title {
  margin: 0 0 4px;
  padding: 0 10px;
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-micro-size);
  font-weight: 600;
  letter-spacing: var(--wiro-type-eyebrow-letter);
  text-transform: uppercase;
}

.docs-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-nav-link {
  gap: 9px;
  margin: 0;
  padding: 7px 10px;
  border-left: 0;
  border-radius: var(--wiro-radius-lg);
  color: var(--wiro-ink3);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.35;
  transition: var(--wiro-transition);
}

.docs-nav-link i {
  color: var(--wiro-ink4);
  font-size: 14px;
  transition: var(--wiro-transition);
}

.docs-nav-link:hover,
.docs-nav-link.is-active {
  background: var(--wiro-bg-hover);
  color: var(--wiro-ink);
}

.docs-nav-link:hover i,
.docs-nav-link.is-active i {
  color: var(--wiro-ink2);
}

.docs-nav-link.is-active {
  font-weight: 600;
}

.docs-nav-group-submenu.is-inline > summary {
  margin: 0;
  padding: 7px 10px;
}

.docs-nav-group-submenu.is-inline > ul .docs-nav-link {
  padding-left: 33px;
  font-size: 13px;
}

.docs-nav-group-submenu > summary::after {
  color: var(--wiro-ink4);
}

.docs-nav-md-row {
  gap: 6px;
  padding: 8px 20px;
}

.docs-nav-md-label {
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-micro-size);
}

.docs-nav-md-btn,
.docs-section-md-btn {
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-md);
  background: var(--wiro-surface);
  color: var(--wiro-ink3);
  font-weight: 500;
  transition: var(--wiro-transition);
}

.docs-nav-md-btn:hover,
.docs-section-md-btn:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.docs-nav-external {
  gap: 6px;
  margin: 0;
  padding: 4px 20px 8px;
}

.docs-nav-external-link {
  padding: 5px 10px;
  border-color: var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  color: var(--wiro-ink3);
  transition: var(--wiro-transition);
}

.docs-nav-external-link:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.docs-search-trigger {
  flex: 0 0 36px;
  width: calc(100% - 28px);
  height: 36px;
  margin: 16px 14px;
  padding: 0 10px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-bg);
  color: var(--wiro-ink4);
  font-size: 13px;
  transition: var(--wiro-transition), box-shadow 0.14s ease;
}

.docs-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 28px;
  overscroll-behavior: contain;
}

.docs-search-trigger:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg);
}

.docs-search-trigger kbd {
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-sm);
  background: var(--wiro-surface);
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-micro-size);
  line-height: 16px;
}

/* --------------------------------------------------------------------------
   5. Main content and right rail
   -------------------------------------------------------------------------- */
.docs-center {
  max-width: 800px;
  height: 100%;
  padding: 48px 56px 52px;
  background: var(--wiro-bg);
}

.docs-center.no-code-panel {
  max-width: 920px;
}

.docs-right-panel {
  width: min(34vw, 440px);
  min-width: 380px;
  max-width: 440px;
  border-left: 1px solid var(--wiro-border-med);
  background: var(--wiro-bg);
}

.docs-right-sticky {
  padding: 28px 20px;
}

.docs-toc-title {
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: var(--wiro-type-eyebrow-weight);
  letter-spacing: var(--wiro-type-eyebrow-letter);
}

.docs-toc-list {
  border-left: 1px solid var(--wiro-border-med);
}

.docs-toc-link {
  padding: 6px 0 6px 14px;
  color: var(--wiro-ink3);
  font-size: var(--wiro-type-meta-size);
  border-left-width: 1px;
  margin-left: -1px;
}

.docs-toc-link:hover {
  color: var(--wiro-ink);
}

.docs-toc-link.is-active {
  border-left-color: var(--wiro-ink);
  color: var(--wiro-ink);
  font-weight: 550;
}

/* --------------------------------------------------------------------------
   6. Shared Wiro prose and documentation surfaces
   -------------------------------------------------------------------------- */
.docs-section {
  color: var(--wiro-ink3);
  font-family: var(--wiro-sans);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.72;
}

.docs-section-md-row {
  margin: 0 0 14px;
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-micro-size);
}

.docs-section h1,
.docs-section h2,
.docs-section h3,
.docs-section h4 {
  color: var(--wiro-ink);
  font-family: var(--wiro-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.docs-section h1:first-of-type {
  margin-top: 0;
}

.docs-section h1 {
  margin: 0 0 10px;
  font-size: var(--wiro-type-page-title-size);
  line-height: 1.2;
}

.docs-section h2 {
  margin: 32px 0 10px;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 1.35;
}

.docs-section h3 {
  margin: 24px 0 8px;
  font-size: 13.5px;
}

.docs-section h4 {
  margin: 20px 0 8px;
  font-size: 12.5px;
}

.docs-section .section-subtitle {
  margin: 0 0 32px;
  color: var(--wiro-ink3);
  font-size: var(--wiro-type-page-subtitle-size);
  font-weight: 450;
  line-height: 1.6;
}

.docs-section p,
.docs-section li {
  color: var(--wiro-ink3);
  font-family: var(--wiro-sans);
  font-weight: 450;
  line-height: 1.72;
}

.docs-section p {
  margin: 0 0 12px;
  font-size: 13.5px;
}

.docs-section ul,
.docs-section ol {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 14px;
  padding-inline-start: 1.45rem;
  list-style-position: outside;
}

.docs-section li {
  margin: 0 0 7px;
  padding-inline-start: 0.2rem;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.docs-section li::marker {
  color: var(--wiro-ink3);
  font-variant-numeric: tabular-nums;
}

.docs-section strong,
.docs-section b {
  color: var(--wiro-ink);
  font-weight: 600;
}

.docs-section a {
  color: var(--wiro-green-text);
  text-decoration: none;
}

.docs-section a:hover {
  text-decoration: underline;
}

.docs-section .docs-link {
  border: 0;
  color: var(--wiro-green-text);
  font-weight: 550;
}

.docs-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 20px;
}

.docs-brand-lockup-primary {
  height: 36px;
}

.docs-brand-separator {
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-metric-md-size);
  font-weight: 400;
  line-height: 1;
}

.docs-brand-lockup-wiro {
  height: 16px;
  filter: var(--wiro-brand-filter);
}

.docs-section code {
  padding: 1px 5px;
  border-radius: var(--wiro-radius-md);
  background: var(--wiro-code-inline-bg);
  color: var(--wiro-code-name);
  font-family: var(--wiro-mono);
  font-size: 12px;
}

.docs-section pre,
.docs-section .shiki {
  margin: 12px 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-code-bg) !important;
  color: var(--wiro-code-fg);
  font-family: var(--wiro-mono);
  font-size: 12.5px;
  line-height: 1.7;
}

.docs-section pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.docs-steps {
  margin: 20px 0;
}

.docs-steps li {
  padding: 0 0 28px 48px;
}

.docs-steps li::before {
  width: 32px;
  height: 32px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-size: var(--wiro-type-caption-size);
  box-shadow: var(--wiro-shadow-sm);
}

.docs-steps li::after {
  left: 15px;
  top: 32px;
  width: 1px;
  background: var(--wiro-border-med);
}

.docs-steps li strong {
  margin: 0 0 2px;
  color: var(--wiro-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.docs-steps li > span {
  color: var(--wiro-ink3);
  font-size: var(--wiro-type-meta-size);
  line-height: var(--wiro-type-meta-line);
}

/* Static table adapter follows WiroTable's bordered surface contract. */
.docs-section table {
  width: 100%;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-size: var(--wiro-type-meta-size);
}

.docs-section table thead {
  background: var(--wiro-bg-warm);
}

.docs-section table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wiro-border-med);
  color: var(--wiro-ink3);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: var(--wiro-type-eyebrow-weight);
  letter-spacing: var(--wiro-type-table-head-letter);
  text-transform: uppercase;
}

.docs-section table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wiro-border);
  color: var(--wiro-ink2);
}

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

.docs-section table tbody tr {
  transition: background 0.18s ease;
}

.docs-section table tbody tr:hover {
  background: var(--wiro-bg-warm);
}

.docs-pagination {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--wiro-border);
}

.docs-pagination-link {
  padding: 12px 14px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-size: var(--wiro-type-meta-size);
  transition: var(--wiro-transition);
}

.docs-pagination-link small {
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: var(--wiro-type-eyebrow-weight);
  letter-spacing: var(--wiro-type-eyebrow-letter);
}

.docs-pagination-link:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.docs-code-panel {
  overflow: hidden;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-code-surface);
  box-shadow: var(--wiro-shadow-sm);
}

.docs-code-panel-title {
  padding: 12px 14px 4px;
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: var(--wiro-type-eyebrow-weight);
  letter-spacing: var(--wiro-type-eyebrow-letter);
}

.docs-code-tabs {
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--wiro-border-med);
}

.docs-code-tab {
  padding: 6px 8px;
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-caption-size);
  transition: var(--wiro-transition);
}

.docs-code-tab:hover {
  color: var(--wiro-ink2);
}

.docs-code-tab.is-active {
  border-bottom-color: var(--wiro-ink);
  color: var(--wiro-ink);
}

.docs-code-content,
.docs-code-rendered,
.docs-code-rendered pre,
.docs-code-rendered .shiki {
  background: var(--wiro-code-bg) !important;
}

.docs-code-rendered,
.docs-code-rendered pre,
.docs-code-rendered .shiki,
.docs-code-rendered code,
.docs-code-rendered .shiki code {
  font-family: var(--wiro-mono);
  font-size: 12.5px;
  line-height: 1.7;
}

.docs-code-copy {
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-code-surface);
  color: var(--wiro-ink3);
  transition: var(--wiro-transition);
}

.docs-code-copy:hover {
  border-color: var(--wiro-border-strong);
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink);
}

/* Shiki dual-theme output keeps one DOM tree and resolves the matching current
   Wiro palette without rerendering when the preference changes. */
.shiki,
.shiki span {
  color: var(--shiki-light);
}

html.wiro-dark .shiki,
html.wiro-dark .shiki span {
  color: var(--shiki-dark) !important;
}

/* --------------------------------------------------------------------------
   7. Explicit static adapters for Wiro component contracts
   -------------------------------------------------------------------------- */

/* HTTP methods are a Docs-specific WiroTag family. POST follows the current
   code-method blue; green remains reserved for GET/positive semantics. */
.endpoint-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 6px;
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-chip);
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink3);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  vertical-align: 0.12em;
}

.endpoint-badge.post {
  border-color: color-mix(in srgb, var(--wiro-blue) 14%, transparent);
  background: var(--wiro-blue-bg);
  color: var(--wiro-blue);
}

.endpoint-badge.get {
  border-color: var(--wiro-green-border);
  background: var(--wiro-green-bg);
  color: var(--wiro-green-text);
}

.endpoint-badge.put {
  border-color: color-mix(in srgb, var(--wiro-amber) 24%, transparent);
  background: var(--wiro-amber-bg);
  color: var(--wiro-amber-text);
}

.endpoint-badge.delete {
  border-color: var(--wiro-danger-border);
  background: var(--wiro-danger-bg);
  color: var(--wiro-danger-text);
}

/* Bordered HTML tables mirror WiroTable's surface, header, row and type
   hierarchy while preserving the existing semantic table markup. */
.docs-param-table,
.docs-comparison-table,
.docs-table-wrapper,
.status-table-wrapper,
.message-table-wrapper {
  margin: 14px 0;
}

.docs-param-table-title {
  margin: 0 0 10px;
  color: var(--wiro-ink);
  font-size: var(--wiro-type-meta-size);
  font-weight: 600;
}

.docs-param-table-wrapper,
.docs-comparison-table,
.docs-table-wrapper,
.status-table-wrapper,
.message-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-surface);
}

.docs-section .docs-param-table table,
.docs-section .docs-comparison-table table,
.docs-section .docs-table-wrapper table,
.docs-section .status-table-wrapper table,
.docs-section .message-table-wrapper table {
  min-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.docs-section table thead {
  background: var(--wiro-bg-warm);
}

.docs-section table thead th,
.docs-param-table thead th,
.docs-comparison-table thead th,
.status-table thead th,
.message-table thead th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wiro-border);
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-eyebrow-size);
  font-weight: var(--wiro-type-eyebrow-weight);
  letter-spacing: var(--wiro-type-table-head-letter);
  line-height: var(--wiro-type-eyebrow-line);
  text-align: left;
  text-transform: uppercase;
}

.docs-section table tbody tr,
.docs-param-table tbody tr,
.docs-comparison-table tbody tr,
.status-table tbody tr,
.message-table tbody tr {
  border-bottom: 1px solid var(--wiro-border);
}

.docs-section table tbody tr:last-child,
.docs-param-table tbody tr:last-child,
.docs-comparison-table tbody tr:last-child,
.status-table tbody tr:last-child,
.message-table tbody tr:last-child {
  border-bottom: 0;
}

.docs-section table tbody td,
.docs-param-table td,
.docs-comparison-table td,
.status-table td,
.message-table td {
  padding: 12px 14px;
  color: var(--wiro-ink2);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-row-size);
  font-weight: 450;
  line-height: var(--wiro-type-meta-line);
  vertical-align: top;
}

.docs-section table tbody tr:hover,
.docs-param-table tbody tr:hover,
.docs-comparison-table tbody tr:hover,
.status-table tbody tr:hover,
.message-table tbody tr:hover {
  background: var(--wiro-bg-warm);
}

.param-name,
.param-type-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-chip);
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink3);
  font-family: var(--wiro-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.param-type {
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-micro-size);
}

.param-required {
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-micro-size);
}

.param-required.is-required {
  color: var(--wiro-green-text);
  font-weight: 600;
}

.param-desc {
  color: var(--wiro-ink2);
}

/* Existing segmented controls implement WiroTabs inset behaviour. */
.auth-method-toggle,
.playground-auth-toggle {
  max-width: 100%;
  gap: 2px;
  margin: 16px 0;
  padding: 3px;
  overflow: visible;
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-bg-warm);
}

.auth-method-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.playground-auth-toggle {
  display: inline-flex;
  width: fit-content;
}

.auth-method-toggle button,
.playground-auth-toggle button {
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--wiro-radius-md);
  background: transparent;
  color: var(--wiro-ink3);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-button-sm-size);
  font-weight: 450;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--wiro-transition);
}

.auth-method-toggle button:first-child {
  border: 0;
}

.auth-method-toggle button:hover:not(.active),
.playground-auth-toggle button:hover:not(.active) {
  background: transparent;
  color: var(--wiro-ink);
}

.auth-method-toggle button.active,
.playground-auth-toggle button.active {
  background: color-mix(in srgb, var(--wiro-surface) 92%, var(--wiro-on-dark) 8%);
  color: var(--wiro-ink);
  font-weight: 550;
  box-shadow: inset 0 0 0 1px var(--wiro-border-strong), var(--wiro-shadow-sm);
}

/* Informational prose uses the Wiro semantic blue wash, not a generic green
   brand border. */
.info-callout,
.docs-section blockquote,
.playground-auth {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--wiro-blue) 14%, transparent);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-blue-bg);
  color: var(--wiro-ink2);
}

.info-callout p,
.docs-section blockquote p,
.playground-auth p {
  margin-bottom: 0;
  color: var(--wiro-ink2);
}

/* SgNote-style neutral callout for API behavior and scope notes. */
.docs-callout {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-xl);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink2);
}

.docs-callout strong {
  color: var(--wiro-ink);
}

/* Code-adjacent note card follows the styleguide's cx-notecard surface. */
.docs-note {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--wiro-code-border);
  border-radius: var(--wiro-radius-xl);
  background: var(--wiro-code-surface);
  color: var(--wiro-code-fg);
}

.docs-note::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 1px 0;
  border-radius: 50%;
  background: var(--wiro-green-mid);
  content: "";
}

/* Buttons and compact links use WiroButton's neutral hover language. */
.docs-nav-md-btn,
.docs-section-md-btn,
.docs-nav-external-link,
.docs-pagination-link,
.docs-code-drawer-toggle,
.docs-code-drawer-close {
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  color: var(--wiro-ink3);
  font-family: var(--wiro-sans);
  font-weight: 450;
  text-decoration: none;
  transition: var(--wiro-transition);
}

.docs-nav-md-btn:hover,
.docs-section-md-btn:hover,
.docs-nav-external-link:hover,
.docs-pagination-link:hover,
.docs-code-drawer-toggle:hover,
.docs-code-drawer-close:hover {
  border-color: var(--wiro-border-med);
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink);
}

.docs-pagination-link:hover i {
  color: var(--wiro-ink2);
}

.docs-section-md-row {
  color: var(--wiro-ink4);
  font-size: var(--wiro-type-micro-size);
}

.docs-nav-md-btn,
.docs-section-md-btn {
  padding: 3px 8px;
  font-size: var(--wiro-type-micro-size);
}

/* Inputs mirror WiroInput/WiroTextarea. */
.model-search-input,
.playground-section input,
.playground-section select,
.playground-section textarea {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  box-shadow: none;
  color: var(--wiro-ink);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-meta-size);
  font-weight: 450;
  outline: none;
  transition: var(--wiro-transition);
}

.playground-section textarea {
  min-height: 82px;
  padding: 12px 13px;
  font-family: var(--wiro-mono);
  font-size: 11.5px;
  line-height: 1.55;
  resize: vertical;
}

.model-search-input::placeholder,
.playground-section input::placeholder,
.playground-section textarea::placeholder {
  color: var(--wiro-ink4);
}

.model-search-input:hover,
.playground-section input:hover,
.playground-section select:hover,
.playground-section textarea:hover,
.model-search-input:focus,
.playground-section input:focus,
.playground-section select:focus,
.playground-section textarea:focus {
  border-color: var(--wiro-border-strong);
}

.model-search-input:focus-visible,
.playground-section input:focus-visible,
.playground-section select:focus-visible,
.playground-section textarea:focus-visible {
  box-shadow: var(--wiro-focus-ring);
}

.playground-section > label,
.playground-param label {
  color: var(--wiro-ink2);
  font-size: var(--wiro-type-meta-size);
  font-weight: 550;
}

/* Selectable cards use a neutral WiroCard hover; only selection receives the
   stronger ink hairline. */
.mcp-client-card,
.model-card {
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  box-shadow: var(--wiro-shadow-sm);
  transition: var(--wiro-transition), box-shadow 0.14s ease;
}

.mcp-client-card:hover,
.model-card:hover {
  border-color: var(--wiro-border-med);
  background: var(--wiro-bg-warm);
}

.mcp-client-card.is-active {
  border-color: var(--wiro-ink);
  background: var(--wiro-bg-warm);
  box-shadow: inset 0 0 0 1px var(--wiro-border);
}

.mcp-client-card i,
.model-card-cat,
.model-loading,
.model-empty {
  color: var(--wiro-ink4);
}

.mcp-client-card:hover i,
.mcp-client-card.is-active i {
  color: var(--wiro-ink2);
}

.mcp-client-card strong,
.model-card-name {
  color: var(--wiro-ink);
}

html.wiro-dark .mcp-client-card .mcp-client-logo {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.45;
}

html.wiro-dark .mcp-client-card:hover .mcp-client-logo,
html.wiro-dark .mcp-client-card.is-active .mcp-client-logo {
  filter: brightness(0) invert(1);
  opacity: 1;
}

html.wiro-dark .dark-invert-icon,
html.wiro-dark .docs-nav-icon-img[src*="twitterx"],
html.wiro-dark .docs-nav-icon-img[src*="tiktok"] {
  filter: invert(1);
}

/* Underline and pill tab families mirror WiroTabs. */
.content-tabs-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--wiro-border);
  scrollbar-width: none;
}

.content-tabs-nav::-webkit-scrollbar {
  display: none;
}

.content-tabs-nav label {
  min-height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--wiro-border);
  background: transparent;
  color: var(--wiro-ink3);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-caption-size);
  font-weight: 500;
  line-height: 34px;
  transition: var(--wiro-transition);
}

.content-tabs-nav label:hover {
  border-bottom-color: var(--wiro-border-med);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

#ct-social:checked ~ .content-tabs-nav label[for="ct-social"],
#ct-blog:checked ~ .content-tabs-nav label[for="ct-blog"],
#ct-appreview:checked ~ .content-tabs-nav label[for="ct-appreview"],
#ct-appevent:checked ~ .content-tabs-nav label[for="ct-appevent"],
#ct-push:checked ~ .content-tabs-nav label[for="ct-push"],
#ct-nlmanager:checked ~ .content-tabs-nav label[for="ct-nlmanager"],
#ct-leadgen:checked ~ .content-tabs-nav label[for="ct-leadgen"],
#ct-googleads:checked ~ .content-tabs-nav label[for="ct-googleads"],
#ct-metaads:checked ~ .content-tabs-nav label[for="ct-metaads"],
#sk-social:checked ~ .content-tabs-nav label[for="sk-social"],
#sk-blog:checked ~ .content-tabs-nav label[for="sk-blog"],
#sk-appreview:checked ~ .content-tabs-nav label[for="sk-appreview"],
#sk-appevent:checked ~ .content-tabs-nav label[for="sk-appevent"],
#sk-push:checked ~ .content-tabs-nav label[for="sk-push"],
#sk-nlmanager:checked ~ .content-tabs-nav label[for="sk-nlmanager"],
#sk-leadgen:checked ~ .content-tabs-nav label[for="sk-leadgen"],
#sk-googleads:checked ~ .content-tabs-nav label[for="sk-googleads"],
#sk-metaads:checked ~ .content-tabs-nav label[for="sk-metaads"] {
  border-bottom-color: var(--wiro-ink);
  border-bottom-width: 2px;
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.examples-tabs {
  gap: 6px;
}

.example-tab {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-button-sm-size);
  font-weight: 450;
  transition: var(--wiro-transition);
}

.example-tab:hover:not(.is-active) {
  border-color: var(--wiro-border-med);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.example-tab.is-active {
  border-color: var(--wiro-ink);
  background: var(--wiro-ink);
  color: var(--wiro-bg);
}

/* Details and FAQ surfaces use the same neutral row language as WiroTable. */
.docs-section details,
.faq-accordion {
  overflow: hidden;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-surface);
}

.docs-section details summary,
.faq-question {
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-meta-size);
  font-weight: 550;
  transition: var(--wiro-transition);
}

.docs-section details summary:hover,
.faq-question:hover {
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink);
}

.skill-value-preview,
.faq-answer-inner {
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink3);
}

.faq-answer-inner {
  padding: 14px 20px 16px;
}

.skill-value-preview h4 {
  border-bottom-color: var(--wiro-border);
  color: var(--wiro-ink);
}

.faq-item {
  border-bottom-color: var(--wiro-border);
}

.faq-question::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  content: "";
  font-family: inherit;
  transform: rotate(45deg);
}

.faq-item.is-open .faq-question::after {
  transform: rotate(225deg);
}

/* Lifecycle and playground controls. */
.lifecycle-flow {
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-bg-warm);
}

.lifecycle-step {
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-chip);
  background: var(--wiro-surface);
  color: var(--wiro-ink2);
  font-family: var(--wiro-mono);
  font-size: var(--wiro-type-micro-size);
  font-weight: 500;
}

.lifecycle-arrow {
  color: var(--wiro-ink4);
}

.playground-model-list {
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
}

.playground-model-item {
  color: var(--wiro-ink2);
}

.playground-model-item:hover {
  background: var(--wiro-bg-warm);
}

.playground-model-item:not(:last-child) {
  border-bottom-color: var(--wiro-border);
}

.playground-selected-model {
  border: 1px solid var(--wiro-border);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-bg-warm);
}

.playground-selected-model span {
  color: var(--wiro-ink2);
}

.playground-selected-model button {
  color: var(--wiro-ink2);
}

.playground-run-btn {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-ink);
  color: var(--wiro-bg);
  font-family: var(--wiro-sans);
  font-size: var(--wiro-type-row-size);
  font-weight: 550;
  transition: var(--wiro-transition);
}

.playground-run-btn:hover:not(:disabled) {
  background: var(--wiro-ink-hover);
  color: var(--wiro-bg);
  opacity: 1;
}

.playground-response {
  border: 1px solid var(--wiro-code-border);
  border-radius: var(--wiro-radius-lg);
  background: var(--wiro-code-bg);
  color: var(--wiro-code-fg);
  font-family: var(--wiro-mono);
}

.playground-response.is-error {
  border-color: var(--wiro-danger-border);
  color: var(--wiro-danger-text);
}

.section-error h2 {
  color: var(--wiro-danger-text);
}

.section-error p {
  color: var(--wiro-ink3);
}

.toast {
  border: 1px solid var(--wiro-code-ondark-border);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-code-ondark-bg);
  color: var(--wiro-code-ondark-fg);
  box-shadow: var(--wiro-shadow-soft);
}

/* --------------------------------------------------------------------------
   8. Existing overlays under the Wiro token layer
   -------------------------------------------------------------------------- */
.docs-search-overlay {
  z-index: var(--wiro-z-modal);
  background: rgb(22 20 15 / 38%);
}

.docs-search-modal {
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-3xl);
  background: var(--wiro-surface);
  color: var(--wiro-ink);
  box-shadow: var(--wiro-shadow-soft);
}

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

.docs-search-trigger i,
.docs-search-header i {
  color: var(--wiro-ink4);
}

.docs-search-header {
  height: 36px;
  margin: 16px;
  padding: 0 10px;
  border: 1px solid var(--wiro-border-med);
  border-radius: var(--wiro-radius-control);
  background: var(--wiro-surface);
  box-shadow: 0 1px 2px rgb(22 20 15 / 3%);
  transition: var(--wiro-transition);
}

.docs-search-header:hover,
.docs-search-header:focus-within {
  border-color: var(--wiro-border-strong);
}

.docs-search-header:focus-within {
  box-shadow: var(--wiro-focus-ring);
}

.docs-search-item {
  border-color: var(--wiro-border);
}

.docs-search-input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.docs-search-input:focus,
.docs-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.docs-search-input,
.docs-search-item-title {
  color: var(--wiro-ink);
  font-family: var(--wiro-sans);
}

.docs-search-input::placeholder,
.docs-search-item-breadcrumb,
.docs-search-item-snippet,
.docs-search-empty,
.docs-search-recent-label {
  color: var(--wiro-ink3);
}

.docs-search-item:hover,
.docs-search-item.is-selected {
  background: var(--wiro-bg-hover);
}

.docs-search-item mark {
  border-radius: var(--wiro-radius-sm);
  background: var(--wiro-green-bg);
  color: var(--wiro-green-text);
}

.docs-search-item-remove {
  color: var(--wiro-ink4);
}

.docs-search-item-remove:hover {
  background: var(--wiro-bg-stone);
  color: var(--wiro-ink);
}

.docs-search-esc {
  padding: 2px 5px;
  border-color: var(--wiro-border);
  border-radius: var(--wiro-radius-md);
  background: var(--wiro-bg-warm);
  color: var(--wiro-ink4);
  font-family: var(--wiro-mono);
  font-size: 10px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Responsive adaptation using the canonical Wiro scale
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .docs-header-brand,
  .docs-header-divider {
    display: none;
  }
}

@media (max-width: 1279px) {
  .docs-right-panel {
    top: 60px;
    width: min(85%, 520px);
    min-width: 0;
    max-width: 520px;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    border-left-color: var(--wiro-border-med);
    background: var(--wiro-bg);
  }

  .docs-code-drawer-toggle {
    top: 72px;
    border: 1px solid var(--wiro-border-med);
    border-radius: var(--wiro-radius-control);
    background: var(--wiro-surface);
    color: var(--wiro-ink2);
    transition: var(--wiro-transition);
  }

  .docs-code-drawer-toggle:hover {
    border-color: var(--wiro-border-strong);
    background: var(--wiro-bg-warm);
    color: var(--wiro-ink);
  }

  .docs-code-drawer-close {
    border: 1px solid var(--wiro-border-med);
    border-radius: var(--wiro-radius-control);
    background: var(--wiro-surface);
    color: var(--wiro-ink3);
  }

  .docs-code-drawer-close:hover {
    border-color: var(--wiro-border-strong);
    background: var(--wiro-bg-stone);
    color: var(--wiro-ink);
  }
}

@media (max-width: 1023px) {
  .docs-header {
    inset-inline-start: 0;
  }

  .docs-header-inner {
    padding-right: 24px;
    padding-left: 24px;
  }

  .docs-mobile-toggle {
    position: static;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 10px 0 0;
    padding: 0;
    border: 1px solid var(--wiro-border-med);
    border-radius: var(--wiro-radius-control);
    background: var(--wiro-surface);
    color: var(--wiro-ink);
  }

  .docs-mobile-toggle span {
    display: none;
  }

  .docs-nav-wrapper {
    top: 60px;
    z-index: 5900;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  .docs-nav {
    box-shadow: var(--wiro-shadow-soft);
  }

  .docs-center {
    padding: 32px 24px 48px;
  }
}

@media (max-width: 767px) {
  .docs-center {
    padding: 24px 16px 40px;
  }

  .docs-section ul,
  .docs-section ol {
    padding-inline-start: 1.3rem;
  }

  .docs-param-table-wrapper,
  .docs-comparison-table,
  .docs-table-wrapper,
  .status-table-wrapper,
  .message-table-wrapper {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .docs-param-table table:has(thead th:nth-child(3)),
  .docs-comparison-table table:has(thead th:nth-child(3)),
  .docs-table,
  .status-table,
  .message-table {
    min-width: 640px;
  }
}

@media (max-width: 560px) {
  .docs-header-inner {
    padding-right: var(--wiro-public-page-x-mobile);
    padding-left: var(--wiro-public-page-x-mobile);
  }

  .docs-header-brand,
  .docs-header-divider,
  .docs-header-product-sep,
  .docs-header-product-page {
    display: none;
  }

  .docs-header-nav-link {
    padding-right: 8px;
    padding-left: 8px;
  }

  .auth-method-toggle {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .docs-header-nav {
    display: none;
  }
}

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