/* ================================================================
   Versola Docs — layout styles
   Загружается через versola.io/css/docs.css на docs.versola.io

   Colors, radii, shadows and fonts are NOT redefined here — every page
   that loads this file also loads /css/style.css first (see
   DocsLayout.astro), which owns the single source of truth for the
   site's visual system (tokens.css: --brand, --ink, --text-muted, --sheet,
   --line, --font, --font-mono, ...). Only the two layout sizes below are
   defined here, so the whole docs surface repaints from one place.
   ================================================================ */

:root {
  --sidebar-width: 256px;
  --topbar-height: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top bar ─── */
.docs-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 1000;
  gap: 0.75rem;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}
.sidebar-toggle:hover { color: var(--ink); }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark-topbar { height: 18px; width: auto; }
.mark-topbar { height: 24px; width: 24px; color: var(--ink); }

.topbar-sep {
  color: var(--text-muted);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  margin: 0 0.1rem;
}

.topbar-label {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 500;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-right a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.topbar-right a:hover { color: var(--ink); }

/* ─── Layout ─── */
.docs-layout {
  display: flex;
  padding-top: var(--topbar-height);
  min-height: 100vh;
}

/* ─── Sidebar ─── */
.docs-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 2rem 0 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  transition: transform 0.25s ease;
}

.docs-sidebar::-webkit-scrollbar { width: 3px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* Section toggle button */
.nav-section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  transition: color 0.15s;
}
.nav-section-btn:hover { color: var(--brand); }
.nav-section-btn.has-active { color: var(--brand); }

.chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}
.nav-section-btn.collapsed .chevron { transform: rotate(-90deg); }

/* Items list */
.nav-items {
  list-style: none;
  padding: 0 0 0.75rem;
  margin: 0;
  overflow: hidden;
}
.nav-items.collapsed { display: none; }

.nav-items > li {
  list-style: none;
}

.nav-items li a {
  display: block;
  padding: 0.3rem 1.25rem 0.3rem 1.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: 0;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.5;
}
.nav-items li a:hover { color: var(--ink); }
.nav-items li a.active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 500;
}

/* Subsection toggle button (nested within a section) */
.nav-subsection-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 1.25rem 0.3rem 2rem;
  margin: 0.1rem 0;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  transition: color 0.15s;
}
.nav-subsection-btn:hover { color: var(--ink); }
.nav-subsection-btn.has-active { color: var(--brand); }
.nav-subsection-btn .chevron {
  width: 12px;
  height: 12px;
}
.nav-subsection-btn.collapsed .chevron { transform: rotate(-90deg); }

/* Subsection items list */
.nav-subsection-items {
  list-style: none;
  padding: 0 0 0.5rem;
  margin: 0;
  overflow: hidden;
}
.nav-subsection-items.collapsed { display: none; }

.nav-subsection-item a {
  display: block;
  padding: 0.25rem 1.25rem 0.25rem 2.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: 0;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.nav-subsection-item a:hover { color: var(--ink); }
.nav-subsection-item a.active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 500;
}

/* Divider between sections */
.nav-divider {
  height: 1px;
  background: var(--line);
  margin: 0.75rem 1.25rem;
  opacity: 0.5;
}

/* ─── Main ─── */
.docs-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.docs-content {
  flex: 1;
  width: 100%;
  padding: 3.5rem 4rem 3.5rem 3rem;
}

/* ─── Prose ─── */
.prose {
  color: var(--ink);
  line-height: 1.85;
  font-size: 0.9375rem;
}

.prose-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.prose-header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.prose-header .page-desc {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.25rem;
}

.prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 0.6rem;
}

.prose p { margin: 0 0 1.3rem; }

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose strong { color: var(--ink); font-weight: 600; }

.prose code {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.15em 0.45em;
  font-family: var(--font-mono);
  font-size: 0.83em;
  color: var(--brand);
}

.prose pre {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0 1.75rem;
  line-height: 1.65;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 0.875em;
}

.prose blockquote {
  border-left: 3px solid var(--brand);
  padding: 0.5rem 1.1rem;
  color: var(--text-muted);
  margin: 1.75rem 0;
  background: var(--sheet);
  border-radius: 0 8px 8px 0;
}
.prose blockquote p { margin: 0; }

.prose ul, .prose ol {
  padding-left: 1.6rem;
  margin: 0 0 1.3rem;
}
.prose li { margin-bottom: 0.45rem; }

/* Task list checkboxes - blue when checked */
.prose input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border: 1.5px solid var(--text-muted);
  border-radius: 3px;
  margin-right: 0.5em;
  position: relative;
  top: 0.15em;
  cursor: default;
  background: transparent;
}

.prose input[type="checkbox"]:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.prose input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 0.25em;
  top: 0.05em;
  width: 0.35em;
  height: 0.6em;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Unchecked items with "removed", "not supported", "intentionally" text - red/muted */
.prose li:has(input[type="checkbox"]:not(:checked)):has(:is(*:contains("removed"), *:contains("not supported"), *:contains("intentionally"))) input[type="checkbox"] {
  border-color: var(--danger);
}

.prose li:has(input[type="checkbox"]:not(:checked)):has(:is(*:contains("removed"), *:contains("not supported"), *:contains("intentionally"))) {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* ─── Collapsible entries: <details><summary>…</summary>…</details> ─── */
.prose details {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sheet);
}

.prose details > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: 0.9rem 1.1rem 0.9rem 2.3rem;
  cursor: pointer;
  list-style: none;
  line-height: 1.5;
}

.prose details > summary::-webkit-details-marker { display: none; }

.prose details > summary::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.prose details[open] > summary::before { transform: rotate(45deg); }
.prose details > summary:hover { background: rgba(21, 23, 28, 0.03); border-radius: 10px; }
.prose details > summary span { color: var(--text-muted); font-size: 0.85rem; }
.prose details[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }

/* The content of an open entry sits inside the border, with the page's own spacing. */
.prose details > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
.prose details > table { width: calc(100% - 2.2rem); }
.prose details > h3:first-of-type { margin-top: 1.25rem; }
.prose details > :last-child { margin-bottom: 1.1rem; }

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.prose th {
  text-align: left;
  padding: 0.6rem 1.1rem;
  background: var(--sheet);
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.prose th + th,
.prose td + td {
  border-left: 1px solid var(--line);
}

.prose td {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.6;
}

.prose tr:last-child td { border-bottom: none; }

.prose tbody tr:nth-child(even) td {
  background: rgba(21, 23, 28, 0.02);
}

/* ─── Page footer ─── */
.docs-page-footer {
  padding: 2rem 4rem 2rem 3rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.docs-page-footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.docs-page-footer a:hover { color: var(--brand); }

/* ─── Sidebar overlay (mobile) ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 900;
}

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }

  .docs-sidebar {
    transform: translateX(-100%);
    z-index: 950;
    width: min(var(--sidebar-width), 82vw);
  }
  .docs-sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .docs-main { margin-left: 0; }

  .docs-content { padding: 2.5rem 1.25rem 2.5rem; }

  .docs-page-footer { padding: 1.5rem 1.25rem; }
}

@media (max-width: 540px) {
  .docs-content { padding: 1.75rem 1rem 2rem; }
}

/* Narrow screens have no room for nowrap cells. Let them wrap, and give the
   table itself the horizontal scroll when its content still does not fit,
   instead of pushing the whole page sideways. */
@media (max-width: 900px) {
  .prose th { white-space: normal; }

  .prose table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ─── Previous / next ─── */
.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 48%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s;
}

.docs-pager-link:hover { border-color: var(--brand); }
.docs-pager-link.next { margin-left: auto; text-align: right; }
.docs-pager-label { font-size: 0.75rem; color: var(--text-muted); }
.docs-pager-title { font-size: 0.9rem; font-weight: 600; }

/* ─── Pre-1.0 badge in the top bar ─── */
.prerelease-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--warn);
  border-radius: 999px;
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: help;
}
.prerelease-badge:hover,
.prerelease-badge:focus-visible { background: rgba(180, 83, 9, 0.08); outline: none; }
.prerelease-badge::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 17rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--invert);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 50;
}
.prerelease-badge:hover::after,
.prerelease-badge:focus-visible::after { opacity: 1; visibility: visible; }
@media (max-width: 900px) {
  .prerelease-badge::after { left: auto; right: 0; transform: none; }
}