/* [x-cloak] already defined in sidebar-menu.css — not repeated here */

/* ============================================================
   DOCS.CSS —
   Dépend de : base.css → layout.css → dashboard.css

   SECTIONS :
   ①  Typography          (.docs-section, .docs-h1, .docs-h2…)
   ②  Callouts & Code     (.ui-alert, .docs-codeblock…)
   ③  Layout              (.docs-layout-wrap, sidebar, content)
   ④  Sidebar nav items   (.docs-sidebar-item…)
   ⑤  Mobile tabs         (.docs-mobile-tab…)
   ⑥  TOC                 (.docs-toc, draggable)
   ⑦  Breadcrumb          (.docs-breadcrumb)
   ⑧  Prev / Next nav     (.docs-nav, .docs-nav-item)
   ⑨  Search UI           (.docs-search-*)
   ⑩  Page card & header  (.docs-page-card, .docs-page-title…)
   ⑪  Legend banner       (.docs-legend)
   ⑫  Terms divider       (.docs-section-divider)
   ⑬  Responsive
   ⑭  Accessibility / Print
============================================================ */


/* ─────────────────────────────────────────────────────
   ① TYPOGRAPHY
───────────────────────────────────────────────────── */

.docs-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text);
  line-height: 1.6;
  padding: .5rem 0;
}

.docs-h1 {
  scroll-margin-top: calc(var(--header-height, 60px) + 1rem);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: .5rem;
  position: relative;
  padding-right: 1.8rem;
}

.docs-h2 {
  scroll-margin-top: calc(var(--header-height, 60px) + 1.5rem);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: .4rem;
  color: var(--accent);
  position: relative;
  padding-right: 1.6rem;
}

.docs-h2::before {
  content: "";
  width: 4px;
  background: var(--accent);
  border-radius: 999px;
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
}

/* Hover anchor (#) */
.docs-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: text-decoration-color var(--duration-2) var(--ease-out), opacity var(--duration-2);
}
.docs-link:hover { opacity: .8; text-decoration-color: var(--accent); }

.docs-anchor {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--muted);
  opacity: 0;
  transition:
    opacity .16s var(--ease-out),
    background .16s var(--ease-out),
    color .16s var(--ease-out),
    transform .12s ease-out;
}

.docs-h2:hover .docs-anchor,
.docs-h1:hover .docs-anchor {
  opacity: 1;
  transform: translateY(-50%) translateX(1px);
}

.docs-anchor:hover {
  background: color-mix(in srgb, var(--accent-bg) 50%, var(--card) 50%);
  color: var(--accent);
}

/* Paragraphs */
.docs-section p {
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.55;
}

/* Lists */
.docs-list {
  list-style: none;
  padding-left: 0;
  margin: .3rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.docs-list li {
  display: flex;
  gap: .55rem;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.4;
  align-items: flex-start;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.docs-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--marker-color, var(--accent));
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .38rem;
}

.docs-list-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.docs-list-item strong {
  display: block;
  font-size: .92rem;
  color: var(--text);
}

.docs-list-item span {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.45;
}


/* ─────────────────────────────────────────────────────
   ② CALLOUTS — .docs-callout
   Accent (default) / Warning / Danger variants.
   Structure: .docs-callout > .docs-callout-header + .docs-callout-body
───────────────────────────────────────────────────── */

.docs-callout {
  --_border:  var(--accent);
  --_bg:      color-mix(in srgb, var(--accent-bg) 55%, var(--card));
  --_title:   color-mix(in srgb, var(--accent) 90%, var(--text));
  --_body:    var(--text);
  --_icon-bg: color-mix(in srgb, var(--accent) 14%, transparent);

  border-left: 4px solid var(--_border);
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  background: var(--_bg);
  padding: 1rem 1.2rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.docs-callout--warning {
  --_border:  var(--warning);
  --_bg:      color-mix(in srgb, var(--warning-bg) 55%, var(--card));
  --_title:   var(--warning);
  --_icon-bg: color-mix(in srgb, var(--warning) 14%, transparent);
}

.docs-callout--danger {
  --_border:  var(--danger);
  --_bg:      color-mix(in srgb, var(--danger-bg) 55%, var(--card));
  --_title:   var(--danger);
  --_icon-bg: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* Header row: icon badge + title */
.docs-callout-header {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.docs-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-2);
  background: var(--_icon-bg);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.docs-callout-title {
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--_title);
  line-height: 1.2;
}

/* Body text */
.docs-callout-body {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--_body);
  padding-left: 2.4rem; /* aligns with title text */
}

.docs-callout-body strong { color: var(--_title); font-weight: 800; }
.docs-callout-body code   { font-size: .83em; }

.docs-codeblock-wrapper {
  position: relative;
  margin: .6rem 0 1.1rem 0;
}

.docs-codeblock-wrapper[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: .45rem;
  left: .75rem;
  font-size: .7rem;
  font-family: monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  opacity: .75;
  pointer-events: none;
}

.docs-codeblock {
  background: color-mix(in srgb, var(--card) 88%, #050505 12%);
  border-radius: var(--radius-4);
  padding: 1rem;
  padding-top: 2.2rem;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: .86rem;
  font-variant-ligatures: contextual;
  overflow-x: auto;
  border-left: 4px solid var(--accent);
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 30%, transparent) transparent;
}

.docs-copy-btn {
  position: absolute;
  top: .45rem;
  right: .6rem;
  font-size: .75rem;
  font-family: inherit;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 60%, transparent);
  background: color-mix(in srgb, var(--card) 85%, var(--accent-bg) 15%);
  color: var(--muted);
  cursor: pointer;
  transition:
    background .16s var(--ease-out),
    border-color .16s var(--ease-out),
    transform .12s ease-out,
    color .16s var(--ease-out);
}

.docs-copy-btn:hover {
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--card) 65%);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  transform: translateY(-1px);
}

.dark .docs-codeblock {
  background: #050816;
  color: #e5e7eb;
  border-left-color: color-mix(in srgb, var(--accent) 80%, #38bdf8 20%);
}


/* ─────────────────────────────────────────────────────
   ③ LAYOUT — sidebar + content
───────────────────────────────────────────────────── */

.docs-layout-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.docs-sidebar {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
}

.docs-content-area {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}

.docs-sidebar-desktop { display: flex; flex-direction: column; gap: .35rem; }
.docs-mobile-tabs     { display: none; }

/* Read progress dot */
.docs-read-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .75;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────
   ④ SIDEBAR NAV ITEMS
   Remplace les anciens settings-row / settings-row-*
───────────────────────────────────────────────────── */

.docs-sidebar-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .75rem;
  border-radius: var(--radius-3);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  outline: none;
  transition:
    background     var(--duration-2) var(--ease-out),
    border-color   var(--duration-2) var(--ease-out),
    transform      .12s ease-out;
}

.docs-sidebar-item:hover {
  background: color-mix(in srgb, var(--accent-bg) 38%, var(--card) 62%);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateX(2px);
}

.docs-sidebar-item.active {
  background: color-mix(in srgb, var(--accent-bg) 52%, var(--card) 48%);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  border-left-color: var(--accent);
  border-left-width: 2px;
}

.docs-sidebar-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.docs-sidebar-item-label {
  font-size: .87rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-2) var(--ease-out);
}

.docs-sidebar-item.active .docs-sidebar-item-label { color: var(--accent); }

.docs-sidebar-item-sub {
  font-size: .76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-sidebar-item-chevron {
  flex-shrink: 0;
  color: var(--muted);
  opacity: .4;
  transition:
    opacity var(--duration-2) var(--ease-out),
    color   var(--duration-2) var(--ease-out);
}

.docs-sidebar-item:hover  .docs-sidebar-item-chevron,
.docs-sidebar-item.active .docs-sidebar-item-chevron {
  opacity: 1;
  color: var(--accent);
}


/* ─────────────────────────────────────────────────────
   ⑤ MOBILE TABS
───────────────────────────────────────────────────── */

.docs-mobile-tab {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--muted) 26%, transparent);
  background: color-mix(in srgb, var(--card) 91%, var(--bg) 9%);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition:
    background   var(--duration-2, 180ms) var(--ease-out),
    border-color var(--duration-2, 180ms) var(--ease-out),
    color        var(--duration-2, 180ms) var(--ease-out),
    box-shadow   var(--duration-2, 180ms) var(--ease-out);
}

.docs-mobile-tab:hover {
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--card) 65%);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.docs-mobile-tab-active {
  background: var(--accent);
  color: var(--color-text-inverse, #fff);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: var(--shadow-accent-glow, 0 2px 18px rgba(34,197,94,.25));
}

.docs-mobile-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--input-ring-focus);
}


/* ─────────────────────────────────────────────────────
   ⑥ TOC — fixed (≥ 1300px) + draggable avec mémoire
───────────────────────────────────────────────────── */

.docs-toc {
  position: fixed;
  top: calc(var(--header-height, 60px) + 5rem);
  right: 1.5rem;
  width: 260px;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: var(--radius-4);
  box-shadow:
    0 4px 24px rgba(0,0,0,.18),
    0 1px 6px rgba(0,0,0,.10);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 30%, transparent) transparent;
  z-index: 90; /* above .header (z-index:50), BELOW .docs-search-overlay (z-index:200) */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-height, 60px) - 8rem);
  overflow-y: auto;
}

@media (max-width: 1299px) { .docs-toc { display: none !important; } }

.docs-toc-link {
  display: block;
  margin-bottom: .22rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .82rem;
  padding: .18rem .15rem;
  border-radius: 4px;
  transition:
    color        .14s var(--ease-out),
    background   .14s var(--ease-out),
    padding-left .14s var(--ease-out);
}

.docs-toc-link:first-of-type {
  color: var(--text);
  font-weight: 600;
  font-size: .84rem;
  margin-bottom: .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
}

.docs-toc-link.active {
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent-bg) 40%, var(--card) 60%);
  padding-left: .4rem;
}

.docs-toc.is-draggable {
  right: auto !important;
  bottom: auto !important;
  touch-action: none;
  user-select: none;
}

.docs-toc-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin: -.15rem -.15rem .45rem -.15rem;
  padding: .45rem .55rem;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--input-bg) 75%, var(--card) 25%);
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  color: var(--muted);
  cursor: grab;
}

.docs-toc.is-dragging .docs-toc-handle { cursor: grabbing; }

.docs-toc-handle small {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}

.docs-toc-grip { width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────
   ⑦ BREADCRUMB
───────────────────────────────────────────────────── */

.docs-breadcrumb {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity   .2s var(--ease-out),
    transform .2s var(--ease-out);
}

.docs-breadcrumb-ready { opacity: 1; transform: translateY(0); }
.docs-breadcrumb-sep   { opacity: .6; }


/* ─────────────────────────────────────────────────────
   ⑧ PREV / NEXT NAV
───────────────────────────────────────────────────── */

.docs-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}

/* Wrapper flex des boutons prev/next */
.docs-nav-item {
  flex: 0 1 240px;
  min-width: 0;
}

/* Bouton next seul → poussé à droite */
.docs-nav-item:only-child { margin-left: auto; }


/* ─────────────────────────────────────────────────────
   ⑨ SEARCH UI
───────────────────────────────────────────────────── */

.docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
  background: var(--input-bg);
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
  transition:
    background   .16s var(--ease-out),
    border-color .16s var(--ease-out),
    color        .16s var(--ease-out),
    transform    .12s ease-out;
}

/* .kbd — keyboard shortcut badge (scoped to docs search trigger) */
.docs-search-trigger .kbd,
.docs-search-trigger span.kbd {
  font-size: .72rem;
  font-family: inherit;
  padding: .1rem .35rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  background: color-mix(in srgb, var(--input-bg) 85%, var(--muted) 15%);
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.4;
}

.docs-search-trigger:hover {
  background: color-mix(in srgb, var(--accent-bg) 30%, var(--input-bg) 70%);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Hint "Esc" dans la barre de recherche */
.docs-search-esc-hint {
  flex-shrink: 0;
  font-size: .72rem;
  padding: .1rem .38rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  background: color-mix(in srgb, var(--input-bg) 85%, var(--muted) 15%);
  color: var(--muted);
  font-family: monospace;
  pointer-events: none;
}

.docs-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200; /* above .header (z-index:50) */
  background: color-mix(in srgb, rgba(0,0,0,.70) 80%, var(--bg) 20%);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}

@keyframes docs-panel-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.docs-search-panel {
  width: min(700px, 92vw);
  background: var(--card);
  border-radius: 1rem;
  box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: docs-panel-in .18s var(--ease-out, cubic-bezier(.25,.8,.25,1)) both;
}

.docs-search-input-wrap {
  padding: .7rem .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
  display: flex;
  align-items: center;
  gap: .55rem;
}

.docs-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  font-family: inherit;
}

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

.docs-search-results {
  max-height: 380px;
  overflow: auto;
  padding: .4rem .4rem .6rem .4rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 30%, transparent) transparent;
}

.docs-search-empty {
  padding: .9rem 1rem;
  font-size: .85rem;
  color: var(--muted);
}

.docs-search-item {
  width: 100%;
  text-align: left;
  padding: .45rem .65rem;
  border-radius: .55rem;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  cursor: pointer;
  font-size: .84rem;
  color: var(--text);
  transition:
    background .14s var(--ease-out),
    transform  .1s  ease-out;
}

.docs-search-item:hover,
.docs-search-item-focused {
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--card) 65%);
  transform: translateY(-1px);
}

.docs-search-item-title { font-weight: 600; }
.docs-search-item-sub   { font-size: .78rem; color: var(--muted); }


/* ─────────────────────────────────────────────────────
   ⑩ PAGE CARD & HEADER
   Wrapper principal de la page docs.
   Remplace les anciens base-form-card / base-container.
───────────────────────────────────────────────────── */

/* Outer : page élargie à 98% */
.docs-outer {
  width: 99% !important;
  max-width: 1400px !important;
}

/* Layout additionnel — .base-card (base.css) fournit fond, padding, border, shadow */
.docs-page-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Header : breadcrumb + titre + search */
.docs-page-header {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}

.docs-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  flex-wrap: wrap;
}

/* Titre principal — aligné avec .db-header-title (dashboard.css) */
.docs-page-title {
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 950;
  letter-spacing: -.028em;
  color: var(--text);
  line-height: 1.1;
  font-feature-settings: "ss01", "cv01";
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 0;
}

.docs-page-icon {
  flex-shrink: 0;
  color: var(--accent);
}

/* Sous-titre (remplace page-sub) */
.docs-page-sub {
  color: var(--muted);
  font-size: .92em;
  line-height: 1.55;
  margin-top: .2em;
}


/* ─────────────────────────────────────────────────────
   ⑪ LEGEND BANNER
   Remplace les anciens base-legend / legend-section / base-pro-list.
   Deux colonnes : texte intro à gauche, points clés à droite.
───────────────────────────────────────────────────── */

.docs-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.4rem;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-4);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-bg) 70%, var(--card)),
      color-mix(in srgb, var(--accent-bg) 40%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 1px 3px rgba(0,0,0,.06),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.docs-legend-col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.docs-legend-heading {
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.2;
  background: linear-gradient(
    105deg,
    var(--text)    30%,
    var(--accent)  100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  /* fallback pour navigateurs sans background-clip:text */
  color: var(--text);
}

.docs-legend-sub {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.docs-legend .docs-list       { margin-top: 0; }
.docs-legend .docs-list li    { font-size: .87rem; }
.docs-legend .docs-list li::before { width: 6px; height: 6px; margin-top: .35rem; }


/* ─────────────────────────────────────────────────────
   ⑫ TERMS — divider between Terms and Privacy
───────────────────────────────────────────────────── */

.docs-section-divider {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
}


/* ─────────────────────────────────────────────────────
   ⑬ RESPONSIVE
───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .docs-layout-wrap { flex-direction: column; gap: .5rem; }
  .docs-sidebar     { width: 100%; min-width: 0; }
  .docs-content-area { width: 100%; }

  .docs-sidebar-desktop { display: none !important; }

  .docs-mobile-tabs {
    display: flex !important;
    overflow-x: auto;
    gap: .45rem;
    padding: .5rem .05rem .65rem .05rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--card);
    border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
    margin-bottom: .75rem;
    margin-left:  calc(-1 * var(--card-padding, 1.6em));
    margin-right: calc(-1 * var(--card-padding, 1.6em));
    padding-left:  var(--card-padding, 1.6em);
    padding-right: var(--card-padding, 1.6em);
  }
  .docs-mobile-tabs::-webkit-scrollbar { display: none; }

  .docs-h2 { padding-left: .65rem; }
  .docs-h2::before { left: 0; }

  .docs-codeblock { font-size: .8rem; overflow-x: auto; max-width: 100%; box-sizing: border-box; }
  .docs-copy-btn  { opacity: 1; }

  .docs-nav { flex-direction: column; gap: .5rem; }
  .docs-nav-item { flex: 1 1 auto; }
  .docs-nav-item:only-child { margin-left: 0; }

  .docs-search-trigger span:not(.kbd) { display: none; }
  .docs-search-trigger .kbd           { display: none; }
  .docs-search-esc-hint               { display: none; }
}

@media (max-width: 640px) {
  .docs-h1       { font-size: 1.25rem; }
  .docs-h2       { font-size: .97rem; margin-top: 1rem; }
  .docs-section  { gap: .65rem; }
  .docs-section p { font-size: .88rem; }
  .docs-list li  { gap: .35rem; }
  .docs-list li::before { width: 6px; height: 6px; margin-top: .32rem; }
  .docs-list-item strong { font-size: .88rem; }
  .docs-list-item span   { font-size: .83rem; }
  .docs-mobile-tab       { font-size: .77rem; padding: .35rem .65rem; }
  .docs-callout      { padding: .7rem .85rem; }
  .docs-callout-body  { padding-left: 1.6rem; }
  .docs-codeblock        { font-size: .78rem; }

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

  .docs-search-overlay { padding-top: 0; align-items: flex-end; justify-content: stretch; }

  .docs-search-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-4, 1.1rem) var(--radius-4, 1.1rem) 0 0;
    max-height: 85vh;
    box-shadow: 0 -8px 40px rgba(0,0,0,.35);
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-top: .65rem;
  }

  .docs-search-panel::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
    margin: 0 auto .5rem auto;
    flex-shrink: 0;
  }

  .docs-search-results    { max-height: 55vh; }
  .docs-search-input-wrap { padding: .65rem 1rem; }
}

@media (max-width: 400px) {
  .docs-h1               { font-size: 1.1rem; }
  .docs-h2               { font-size: .92rem; }
  .docs-callout      { font-size: .82rem; padding: .6rem .7rem; }
  .docs-callout-body  { padding-left: 1.1rem; }
  .docs-list-item strong { font-size: .84rem; }
  .docs-list-item span   { font-size: .8rem; }
  .docs-codeblock        { font-size: .73rem; }
}


/* ─────────────────────────────────────────────────────
   ⑭ ACCESSIBILITY + PRINT
───────────────────────────────────────────────────── */

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

/* Focus visible */
.docs-sidebar-item:focus-visible,
.docs-search-trigger:focus-visible,
.docs-copy-btn:focus-visible,
.docs-toc-link:focus-visible,
.docs-search-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media print {
  .docs-sidebar,
  .docs-toc,
  .docs-search-trigger,
  .docs-search-overlay,
  .docs-nav { display: none !important; }

  .docs-layout-wrap { display: block; }
  .docs-section     { color: #000; }
  .docs-h2          { color: #000; }
  .docs-callout                { border-left-color: #aaa; background: #f9f9f9; }
  .docs-callout-header         { gap: .4rem; }
  .docs-callout-icon           { display: none; }
  .docs-callout-title          { font-size: .85rem; color: #222; }
  .docs-callout-body           { padding-left: 0; font-size: .85rem; color: #333; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .75rem;
    color: #555;
  }
}