/* ============================================================
   docs.css — Retinex Health public documentation portal
   Static HTML/CSS port of the Next.js (docs) route group.
   Light-first theme with an optional dark mode (data-theme="dark").
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette — light (mirrors the React design hex values) */
  --d-bg:           #F4F7FB;
  --d-surface:      #ffffff;
  --d-surface-soft: #F4F7FB;
  --d-border:       #DCDFE4;
  --d-accent:       #1868db;
  --d-accent-hover: #2118b2;
  --d-accent-soft:  #e9f2ff;
  --d-accent-line:  #669df1;
  --d-text:         #292a2e;
  --d-text-muted:   #505258;
  --d-text-faint:   #6B6E76;
  --d-success:      #22A06B;
  --d-success-dark: #1B6E4A;
  --d-code-bg:      #e9f2ff;
  --d-mark-bg:      #FEF3C7;
  --d-mark-text:    #92400E;
  --d-shadow-md:    0 4px 12px rgba(9, 30, 66, 0.08);
  --d-shadow-lg:    0 10px 30px rgba(9, 30, 66, 0.12);

  --d-font: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --d-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'JetBrains Mono', monospace;

  --d-topbar-h: 64px;
  --d-sidebar-w: 260px;
  --d-rail-w: 280px;
}

[data-theme="dark"] {
  --d-bg:           #0d1117;
  --d-surface:      #161b22;
  --d-surface-soft: #1c2128;
  --d-border:       #30363d;
  --d-accent:       #4493f8;
  --d-accent-hover: #6cb0ff;
  --d-accent-soft:  #1c2c44;
  --d-accent-line:  #2f5a92;
  --d-text:         #e6edf3;
  --d-text-muted:   #adbac7;
  --d-text-faint:   #8b949e;
  --d-success:      #3fb950;
  --d-success-dark: #56d364;
  --d-code-bg:      #1c2c44;
  --d-mark-bg:      #6b4f00;
  --d-mark-text:    #ffe08a;
  --d-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --d-shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.55);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--d-topbar-h) + 1rem); -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--d-font);
  background: var(--d-bg);
  color: var(--d-text);
  line-height: 1.6;
  min-height: 100vh;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Top bar ---------- */
.docs-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--d-topbar-h);
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-border);
}

.docs-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  width: var(--d-sidebar-w);
  height: 100%;
  padding-inline: 1.25rem;
}

.docs-topbar__logo { width: 40px; height: 40px; object-fit: contain; border-radius: 9999px; }

.docs-topbar__title { font-size: 1.125rem; font-weight: 700; color: var(--d-text); }
.docs-topbar__title span { color: var(--d-accent); }

.docs-topbar__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  height: 100%;
  padding-inline: 1.5rem;
  min-width: 0;
}

.docs-topbar__search { width: 100%; max-width: 28rem; margin-inline: auto; }

.docs-topbar__actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }

.docs-topbar__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--d-text-muted);
  transition: background .15s, color .15s;
}
.docs-topbar__action:hover { background: var(--d-accent-soft); color: var(--d-accent); }
.docs-topbar__action.is-active { background: var(--d-accent-soft); color: var(--d-accent); font-weight: 600; }
.docs-topbar__action--apiref { font-weight: 500; }

.docs-status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.875rem; color: var(--d-text-muted); }
.docs-status__dot { position: relative; display: inline-flex; width: 0.5rem; height: 0.5rem; }
.docs-status__dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--d-success); opacity: 0.6; animation: docs-ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
}
.docs-status__dot::after { content: ""; position: relative; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--d-success); }
@keyframes docs-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.docs-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem; color: var(--d-text-muted);
  transition: background .15s, color .15s;
}
.docs-iconbtn:hover { background: var(--d-accent-soft); color: var(--d-accent); }

.docs-menu-btn { display: none; }

/* Hide labels for the "what's new" / "status" on small screens */
@media (max-width: 900px) {
  .docs-topbar__action--wide, .docs-status { display: none; }
}

/* ---------- Layout ---------- */
/* Fixed app-shell: the top bar and sidebar are pinned; only the main
   content participates in the document scroll. */
.docs-layout { display: flex; margin-top: var(--d-topbar-h); }

/* ---------- Sidebar ---------- */
.docs-sidebar {
  position: fixed;
  top: var(--d-topbar-h);
  left: 0;
  z-index: 30;
  flex-shrink: 0;
  width: var(--d-sidebar-w);
  height: calc(100vh - var(--d-topbar-h));
  overflow-y: auto;
  background: var(--d-surface);
  border-right: 1px solid var(--d-border);
  padding: 1.5rem 1.25rem;
}

.docs-nav__section { margin-bottom: 1.5rem; }
.docs-nav__heading {
  margin: 0 0 0.5rem;
  padding-inline: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-text-faint);
}
.docs-nav__list { list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }
.docs-nav__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--d-text);
  transition: background .15s, color .15s;
}
.docs-nav__link svg { color: var(--d-text-faint); flex-shrink: 0; }
.docs-nav__link:hover { background: var(--d-surface-soft); color: var(--d-accent); }
.docs-nav__link:hover svg { color: var(--d-accent); }
.docs-nav__link--active { background: var(--d-accent-soft); font-weight: 600; color: var(--d-accent); }
.docs-nav__link--active svg { color: var(--d-accent); }

.docs-help-card {
  margin-top: 2rem;
  border: 1px solid var(--d-border);
  background: var(--d-surface-soft);
  border-radius: 0.75rem;
  padding: 1rem;
}
.docs-help-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.docs-help-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 0.375rem;
  background: var(--d-accent-soft); color: var(--d-accent);
}
.docs-help-card__title { font-size: 0.875rem; font-weight: 600; color: var(--d-text); }
.docs-help-card__link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--d-accent); }
.docs-help-card__link:hover { text-decoration: underline; }

/* ---------- Scrollbars (thin, theme-aware) ---------- */
.docs-sidebar,
.docs-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--d-border) transparent;
}
.docs-sidebar::-webkit-scrollbar,
.docs-rail::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.docs-sidebar::-webkit-scrollbar-track,
.docs-rail::-webkit-scrollbar-track {
  background: transparent;
}
.docs-sidebar::-webkit-scrollbar-thumb,
.docs-rail::-webkit-scrollbar-thumb {
  background: var(--d-border);
  border-radius: 9999px;
}
.docs-sidebar::-webkit-scrollbar-thumb:hover,
.docs-rail::-webkit-scrollbar-thumb:hover {
  background: var(--d-text-faint);
}
/* hide the scrollbar arrow buttons (Windows) */
.docs-sidebar::-webkit-scrollbar-button,
.docs-rail::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* ---------- Main ---------- */
/* Offset to clear the fixed sidebar; the document scroll lives here. */
.docs-content { display: flex; flex: 1; min-width: 0; margin-left: var(--d-sidebar-w); }
.docs-main { flex: 1; min-width: 0; padding: 2rem 1.5rem; }
@media (min-width: 768px) { .docs-main { padding: 2rem 2.5rem; } }

.docs-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  margin-bottom: 1rem; font-size: 0.875rem; color: var(--d-text-faint);
}
.docs-breadcrumbs a:hover { color: var(--d-accent); }
.docs-breadcrumbs .sep { color: var(--d-border); }
.docs-breadcrumbs .current { font-weight: 500; color: var(--d-text); }

/* ---------- Page header ---------- */
.docs-pagehead { margin-bottom: 2rem; }
.docs-criterion {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem; padding: 0.25rem 0.75rem;
  border-radius: 9999px; background: var(--d-accent-soft);
  font-size: 0.75rem; font-weight: 600; color: var(--d-accent);
}
.docs-criterion::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--d-accent); }
.docs-pagehead h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.15; color: var(--d-text); }
@media (min-width: 768px) { .docs-pagehead h1 { font-size: 2.25rem; } }
.docs-pagehead__subtitle { margin-top: 0.5rem; max-width: 48rem; font-size: 1rem; color: var(--d-text-muted); }
.docs-pagehead__meta { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.docs-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 0.375rem;
  border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text-muted);
}
.docs-badge b { color: var(--d-text); font-weight: 600; }
.docs-badge--ok {
  border-color: color-mix(in srgb, var(--d-success) 30%, transparent);
  background: color-mix(in srgb, var(--d-success) 10%, transparent);
  color: var(--d-success-dark); font-weight: 500;
}

/* ---------- Prose ---------- */
.docs-prose { font-size: 1rem; color: var(--d-text); max-width: 52rem; }
.docs-prose h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--d-text);
  margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--d-accent-soft); position: relative;
}
.docs-prose h2::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; background: var(--d-accent); }
.docs-prose h2:first-child { margin-top: 0; }
.docs-prose h3 { font-size: 1.125rem; font-weight: 700; color: var(--d-text); margin-top: 1.75rem; margin-bottom: 0.5rem; }
.docs-prose h4 { font-size: 1rem; font-weight: 600; color: var(--d-text-muted); margin-top: 1.25rem; margin-bottom: 0.5rem; }
.docs-prose p { margin-bottom: 0.9rem; line-height: 1.7; }
.docs-prose ul, .docs-prose ol { margin: 0.75rem 0 1rem 1.25rem; }
.docs-prose ul { list-style: disc; }
.docs-prose ol { list-style: decimal; }
.docs-prose li { margin-bottom: 0.4rem; line-height: 1.65; }
.docs-prose a { color: var(--d-accent); border-bottom: 1px solid var(--d-accent-line); transition: color .15s, border-color .15s; }
.docs-prose a:hover { color: var(--d-accent-hover); border-bottom-color: var(--d-accent-hover); }
.docs-prose code {
  background: var(--d-code-bg); color: var(--d-accent);
  padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875em; font-family: var(--d-mono);
}
.docs-prose pre {
  background: linear-gradient(164deg, #1a2840 0%, #0f172a 100%);
  color: #e2e8f0; padding: 1.1rem 1.25rem; border-radius: 8px;
  overflow-x: auto; margin: 1.1rem 0; font-size: 0.85rem;
  border: 1px solid #2118b2; box-shadow: 0 1px 3px rgba(33,24,178,0.1);
}
.docs-prose pre code { background: transparent; color: inherit; padding: 0; font-size: 0.85rem; }
.docs-prose table {
  width: 100%; margin: 1.25rem 0; border-collapse: separate; border-spacing: 0;
  font-size: 0.9rem; border: 1px solid var(--d-border); border-radius: 8px; overflow: hidden;
}
.docs-prose th, .docs-prose td { border-bottom: 1px solid var(--d-border); padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; }
.docs-prose td { border-right: 1px solid var(--d-border); }
.docs-prose td:last-child, .docs-prose th:last-child { border-right: none; }
.docs-prose th { background: var(--d-surface-soft); font-weight: 600; color: var(--d-text); border-bottom: 1px solid var(--d-accent); }
.docs-prose tr:last-child td { border-bottom: none; }
.docs-prose tbody tr:hover { background: var(--d-surface-soft); }
.docs-prose blockquote {
  border-left: 4px solid var(--d-accent); background: var(--d-accent-soft);
  padding: 0.9rem 1.1rem; margin: 1.1rem 0; color: var(--d-accent); border-radius: 0 8px 8px 0;
}
.docs-prose blockquote p { margin-bottom: 0; color: var(--d-accent-hover); }
.docs-prose hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--d-border); }
.docs-prose strong { color: var(--d-text); font-weight: 600; }
.docs-prose .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -0.5rem 0 0.75rem; }
.docs-prose .tag-date { font-size: 0.85rem; color: var(--d-text-faint); }
.docs-tag {
  display: inline-flex; align-items: center; border-radius: 9999px;
  border: 1px solid var(--d-border); padding: 0.1rem 0.5rem;
  font-size: 0.6875rem; font-weight: 600; color: var(--d-text-muted); background: var(--d-surface-soft);
}
.docs-tag--blue { background: var(--d-accent-soft); color: var(--d-accent); border-color: var(--d-accent-line); }
.docs-tag--green {
  background: color-mix(in srgb, var(--d-success) 10%, transparent);
  color: var(--d-success-dark);
  border-color: color-mix(in srgb, var(--d-success) 30%, transparent);
}

/* ---------- Right rail ---------- */
.docs-rail {
  position: sticky; top: var(--d-topbar-h); flex-shrink: 0;
  width: var(--d-rail-w); height: calc(100vh - var(--d-topbar-h));
  overflow-y: auto; background: var(--d-surface);
  border-left: 1px solid var(--d-border); padding: 2rem 1.25rem;
}
.docs-rail__card { border: 1px solid var(--d-border); background: var(--d-surface); border-radius: 0.75rem; padding: 1rem; }
.docs-rail__card + .docs-rail__card { margin-top: 1.5rem; }
.docs-rail__title { font-size: 0.875rem; font-weight: 600; color: var(--d-text); margin-bottom: 0.75rem; }
.docs-toc { list-style: none; border-left: 1px solid var(--d-border); }
.docs-toc a {
  display: block; border-left: 2px solid transparent; padding: 0.25rem 0 0.25rem 1rem;
  font-size: 0.875rem; color: var(--d-text-muted); margin-left: -1px; transition: color .15s, border-color .15s;
}
.docs-toc a:hover, .docs-toc a.is-active { color: var(--d-accent); border-left-color: var(--d-accent); }
.docs-toc li.lvl-3 a { padding-left: 1.5rem; font-size: 0.8125rem; }

.docs-rail__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.docs-rail__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.375rem; background: var(--d-accent-soft); color: var(--d-accent);
}
.docs-rail__text { font-size: 0.75rem; line-height: 1.6; color: var(--d-text-faint); margin-bottom: 0.75rem; }
.docs-rail__btn {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.375rem;
  border: 1px solid var(--d-border); background: var(--d-surface-soft); border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--d-accent); transition: background .15s;
}
.docs-rail__btn:hover { background: var(--d-accent-soft); }
.docs-rail__links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.docs-rail__links a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--d-accent); }
.docs-rail__links a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.docs-footer { border-top: 1px solid var(--d-border); background: var(--d-surface); margin-left: var(--d-sidebar-w); }
.docs-footer__inner {
  max-width: 80rem; margin-inline: auto; padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 0.75rem; font-size: 0.75rem; color: var(--d-text-faint);
}
@media (min-width: 768px) { .docs-footer__inner { flex-direction: row; } }
.docs-footer__links { display: flex; align-items: center; gap: 1.25rem; }
.docs-footer__links a:hover { color: var(--d-accent); }

/* ---------- Index page (overview) ---------- */
.docs-overview__title { margin-bottom: 1.5rem; }
.docs-overview__title h1 { font-size: 1.875rem; font-weight: 700; color: var(--d-text); }
.docs-overview__title p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--d-text-muted); }
.docs-section { margin-bottom: 3rem; }
.docs-section__h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.docs-section__h h2 { font-size: 1rem; font-weight: 600; color: var(--d-text); }
.docs-section__h svg { color: var(--d-accent); }

.docs-card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .docs-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .docs-card-grid { grid-template-columns: repeat(3, 1fr); } }
.docs-card {
  display: flex; flex-direction: column; border: 1px solid var(--d-border);
  background: var(--d-surface); border-radius: 0.75rem; padding: 1.25rem;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.docs-card:hover { transform: translateY(-2px); border-color: var(--d-accent-line); box-shadow: var(--d-shadow-md); }
.docs-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; margin-bottom: 0.75rem;
  background: var(--d-accent-soft); color: var(--d-accent);
}
.docs-card__title { font-size: 1rem; font-weight: 600; color: var(--d-text); }
.docs-card__text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.6; color: var(--d-text-muted); }
.docs-card__cta { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--d-accent); }

.docs-articles { overflow: hidden; border: 1px solid var(--d-border); background: var(--d-surface); border-radius: 0.75rem; }
.docs-article {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.25rem;
  border-bottom: 1px solid var(--d-border); transition: background .15s;
}
@media (min-width: 768px) { .docs-article { flex-direction: row; align-items: center; justify-content: space-between; } }
.docs-article:hover { background: var(--d-surface-soft); }
.docs-article__main { display: flex; flex: 1; align-items: flex-start; gap: 0.75rem; }
.docs-article__icon {
  margin-top: 0.125rem; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background: var(--d-accent-soft); color: var(--d-accent);
}
.docs-article__title { font-size: 0.875rem; font-weight: 600; color: var(--d-text); }
.docs-article__desc { margin-top: 0.125rem; font-size: 0.875rem; color: var(--d-text-faint); }
.docs-article__meta { display: flex; flex-shrink: 0; align-items: center; gap: 0.75rem; }
@media (min-width: 768px) { .docs-article__meta { margin-left: 1rem; } }
.docs-chip { border-radius: 9999px; background: var(--d-surface-soft); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; color: var(--d-text-muted); }
.docs-readtime { font-size: 0.75rem; color: var(--d-text-faint); }
.docs-article--all {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  border-top: 1px solid var(--d-border); background: var(--d-surface-soft);
  padding: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--d-accent); transition: background .15s;
}
.docs-article--all:hover { background: var(--d-accent-soft); }

/* ---------- Search ---------- */
.docs-search { position: relative; width: 100%; }
.docs-search__icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--d-text-faint); pointer-events: none; }
.docs-search__input {
  width: 100%; border: 1px solid var(--d-border); background: var(--d-surface);
  border-radius: 0.5rem; font-size: 0.875rem; color: var(--d-text);
  padding: 0.5rem 4rem 0.5rem 2.25rem; transition: border-color .15s, box-shadow .15s;
}
.docs-search__input::placeholder { color: var(--d-text-faint); }
.docs-search__input:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 2px var(--d-accent-soft); }
.docs-search--full { max-width: 34rem; }
.docs-search--full .docs-search__input { padding-block: 0.625rem; }
.docs-search__kbd {
  position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--d-border); background: var(--d-surface-soft); border-radius: 4px;
  padding: 0.125rem 0.375rem; font-size: 10px; font-weight: 500; color: var(--d-text-faint);
}
.docs-search__clear {
  position: absolute; right: 3rem; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  border-radius: 4px; color: var(--d-text-faint);
}
.docs-search__clear:hover { background: var(--d-surface-soft); color: var(--d-text); }
.docs-search.has-query .docs-search__clear { display: inline-flex; }
.docs-search.has-query .docs-search__kbd { display: none; }

.docs-search__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: 0.5rem;
  max-height: 28rem; overflow-y: auto; border: 1px solid var(--d-border);
  background: var(--d-surface); border-radius: 0.75rem; box-shadow: var(--d-shadow-lg); display: none;
}
.docs-search.is-open .docs-search__panel { display: block; }
.docs-search__count {
  border-bottom: 1px solid var(--d-border); background: var(--d-surface-soft);
  padding: 0.375rem 0.75rem; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--d-text-faint);
}
.docs-search__list { list-style: none; }
.docs-result {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border-bottom: 1px solid var(--d-border); padding: 0.625rem 0.75rem; transition: background .15s;
}
.docs-result:last-child { border-bottom: none; }
.docs-result:hover, .docs-result.is-active { background: var(--d-accent-soft); }
.docs-result__icon {
  margin-top: 0.125rem; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background: var(--d-accent-soft); color: var(--d-accent);
}
.docs-result.is-active .docs-result__icon { background: var(--d-accent); color: #fff; }
.docs-result__body { min-width: 0; flex: 1; }
.docs-result__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.docs-result__title { font-size: 0.875rem; font-weight: 600; color: var(--d-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-result__cat { flex-shrink: 0; border-radius: 9999px; background: var(--d-surface-soft); padding: 0.05rem 0.5rem; font-size: 10px; font-weight: 500; color: var(--d-text-muted); }
.docs-result__desc { margin-top: 0.125rem; font-size: 0.75rem; color: var(--d-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-result mark { border-radius: 3px; background: var(--d-mark-bg); color: var(--d-mark-text); padding: 0 0.1rem; }
.docs-search__empty { padding: 2rem; text-align: center; }
.docs-search__empty p { font-size: 0.875rem; color: var(--d-text); }
.docs-search__empty p.sub { margin-top: 0.25rem; font-size: 0.75rem; color: var(--d-text-faint); }
.docs-search__empty a { color: var(--d-accent); }
.docs-search__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--d-border); background: var(--d-surface-soft);
  padding: 0.375rem 0.75rem; font-size: 10px; color: var(--d-text-faint);
}
.docs-search__foot kbd { border: 1px solid var(--d-border); background: var(--d-surface); border-radius: 3px; padding: 0.05rem 0.25rem; font-size: 9px; font-weight: 500; }
.docs-search__foot span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ---------- Mobile backdrop ---------- */
.docs-backdrop { display: none; position: fixed; inset: var(--d-topbar-h) 0 0; background: rgba(9,30,66,0.4); z-index: 30; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .docs-rail { display: none; }
}
@media (max-width: 1023px) {
  .docs-menu-btn { display: inline-flex; }
  /* Sidebar becomes an off-canvas drawer; content/footer span full width. */
  .docs-content, .docs-footer { margin-left: 0; }
  .docs-sidebar {
    z-index: 35;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--d-shadow-lg);
  }
  body.docs-sidebar-open .docs-sidebar { transform: translateX(0); }
  body.docs-sidebar-open .docs-backdrop { display: block; }
}
@media (max-width: 560px) {
  .docs-topbar__brand { width: auto; border-right: none; padding-inline: 1rem; }
  .docs-topbar__main { padding-inline: 1rem; }
  .docs-card-grid { grid-template-columns: 1fr; }
}