/* Design tokens extracted directly from the live docs.upgrade-scripts.com (GitBook,
   "clean" theme, no-tint, dark mode default, Inter font, rounded corners, subtle depth). */
:root, .dark {
  --primary-1: 29 29 29;   --primary-2: 32 35 39;   --primary-3: 39 44 53;
  --primary-4: 40 48 62;   --primary-5: 43 54 72;   --primary-6: 45 58 81;
  --primary-7: 52 68 96;   --primary-8: 59 78 112;  --primary-9: 52 109 219;
  --primary-10: 80 139 252; --primary-11: 167 193 239; --primary-12: 249 255 255;

  --tint-1: 29 29 29;  --tint-2: 34 34 35;  --tint-3: 43 44 45;  --tint-4: 47 48 49;
  --tint-5: 52 54 55;  --tint-6: 56 58 60;  --tint-7: 66 68 70;  --tint-8: 76 78 81;
  --tint-9: 127 133 144; --tint-10: 138 145 156; --tint-11: 190 192 197; --tint-12: 254 255 255;

  --success-9: 0 201 80;  --success-10: 0 176 54; --success-11: 155 208 161;
  --warning-9: 254 154 0; --warning-10: 213 116 0; --warning-11: 224 184 145;
  --danger-9: 251 44 54;  --danger-10: 255 52 59;  --danger-11: 248 168 161;

  --font-sans: Inter, "Inter Fallback", system-ui, arial, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius: 8px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.24);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: rgb(var(--tint-1));
  color: rgb(var(--tint-12));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: rgb(var(--primary-10)); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgb(var(--primary-9) / 0.35); }

/* --- Topbar --------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: rgb(var(--tint-1) / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(var(--tint-5));
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: rgb(var(--tint-11));
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
}
.sidebar-toggle:hover { background: rgb(var(--tint-3)); }

.brand {
  font-weight: 600;
  font-size: 15px;
  color: rgb(var(--tint-12));
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.topbar-search { position: relative; flex: 1; max-width: 320px; margin-left: auto; }
#search-input {
  width: 100%;
  background: rgb(var(--tint-3));
  border: 1px solid rgb(var(--tint-6));
  border-radius: var(--radius);
  color: rgb(var(--tint-12));
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}
#search-input:focus {
  outline: none;
  border-color: rgb(var(--primary-9));
  box-shadow: 0 0 0 3px rgb(var(--primary-9) / 0.25);
}

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: rgb(var(--tint-2));
  border: 1px solid rgb(var(--tint-6));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}
.search-results.open { display: block; }
.search-result {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid rgb(var(--tint-4));
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: rgb(var(--tint-3)); text-decoration: none; }
.search-result .result-title { font-size: 13px; font-weight: 600; color: rgb(var(--tint-12)); }
.search-result .result-snippet { font-size: 12px; color: rgb(var(--tint-9)); margin-top: 2px; }
.search-empty { padding: 14px; font-size: 13px; color: rgb(var(--tint-9)); }

/* --- Layout ------------------------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 240px;
  max-width: 1440px;
  margin: 0 auto;
}

/* --- Sidebar ------------------------------------------------------------------------ */

.sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 24px 12px 40px;
  border-right: 1px solid rgb(var(--tint-5));
}

.nav-group { margin-bottom: 20px; }
.nav-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--tint-9));
  padding: 4px 10px;
  margin-bottom: 4px;
}

.nav-item { font-size: 14px; }
.nav-item > a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: rgb(var(--tint-11));
  font-weight: 500;
}
.nav-item > a:hover { background: rgb(var(--tint-3)); text-decoration: none; color: rgb(var(--tint-12)); }
.nav-item.active > a {
  background: rgb(var(--primary-9) / 0.15);
  color: rgb(var(--primary-11));
  font-weight: 600;
}
.nav-children { margin-left: 14px; border-left: 1px solid rgb(var(--tint-5)); padding-left: 8px; }
.nav-item:not(.active):not(.expanded) > .nav-children { display: none; }
.nav-depth-1 > a, .nav-depth-2 > a { font-size: 13.5px; }

/* --- Content ------------------------------------------------------------------------- */

.content { padding: 40px 48px 80px; min-width: 0; }

.prose h1 { font-size: 32px; font-weight: 700; margin: 0 0 24px; color: rgb(var(--tint-12)); }
.prose h2 { font-size: 22px; font-weight: 700; margin: 40px 0 12px; padding-top: 4px; color: rgb(var(--tint-12)); }
.prose h3 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; color: rgb(var(--tint-12)); }
.prose h4 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; color: rgb(var(--tint-12)); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.heading-anchor {
  float: left;
  margin-left: -20px;
  padding-right: 6px;
  opacity: 0;
  color: rgb(var(--tint-8));
  font-weight: 400;
  text-decoration: none;
}
.prose h1:hover .heading-anchor,
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor { opacity: 1; }

.prose p { margin: 0 0 16px; color: rgb(var(--tint-11)); }
.prose strong { color: rgb(var(--tint-12)); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: rgb(var(--tint-11)); }
.prose li { margin-bottom: 4px; }
.prose li > p { margin-bottom: 4px; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgb(var(--tint-4));
  border: 1px solid rgb(var(--tint-6));
  border-radius: 4px;
  padding: 1px 5px;
  color: rgb(var(--primary-11));
}

.prose pre {
  background: rgb(var(--tint-2));
  border: 1px solid rgb(var(--tint-6));
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
  margin: 0 0 20px;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: rgb(var(--tint-12));
  font-size: 13.5px;
  line-height: 1.6;
}

.prose blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 3px solid rgb(var(--primary-9));
  background: rgb(var(--primary-9) / 0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: rgb(var(--tint-11));
}

.prose figure { margin: 0 0 20px; }
.prose img { max-width: 100%; border-radius: var(--radius); border: 1px solid rgb(var(--tint-6)); }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.prose th { text-align: left; padding: 8px 12px; border-bottom: 2px solid rgb(var(--tint-6)); color: rgb(var(--tint-12)); }
.prose td { padding: 8px 12px; border-bottom: 1px solid rgb(var(--tint-4)); color: rgb(var(--tint-11)); }

.prose hr { border: none; border-top: 1px solid rgb(var(--tint-5)); margin: 32px 0; }

/* --- Prev/next footer ----------------------------------------------------------------- */

.page-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--tint-5));
}
.prev-next-link {
  display: block;
  padding: 12px 16px;
  border: 1px solid rgb(var(--tint-6));
  border-radius: var(--radius);
  min-width: 160px;
  color: rgb(var(--tint-12));
  font-weight: 600;
  font-size: 14px;
}
.prev-next-link:hover { border-color: rgb(var(--primary-9)); text-decoration: none; }
.prev-next-link.next { text-align: right; margin-left: auto; }
.prev-next-label { display: block; font-size: 11px; font-weight: 500; color: rgb(var(--tint-9)); margin-bottom: 2px; }

/* --- Table of contents (right rail) ----------------------------------------------------- */

.page-toc-wrap { padding: 40px 20px; }
.page-toc { position: sticky; top: 76px; }
.toc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--tint-9)); margin-bottom: 10px; }
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc li { margin-bottom: 6px; }
.page-toc a { font-size: 13px; color: rgb(var(--tint-10)); display: block; line-height: 1.4; }
.page-toc a:hover { color: rgb(var(--primary-10)); text-decoration: none; }
.toc-depth-3 { padding-left: 14px; }

/* --- Responsive ------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); }
  .page-toc-wrap { display: none; }
}

@media (max-width: 860px) {
  .sidebar-toggle { display: inline-flex; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 56px;
    width: 280px;
    background: rgb(var(--tint-1));
    transform: translateX(-100%);
    transition: transform 0.15s ease;
    z-index: 30;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 28px 20px 60px; }
  .topbar-search { max-width: none; }
}