/* ============================================================
   docs.html — page-scoped styles.

   This page still actively linked common.css and styles.css, both
   of which were renamed to oldcommon.css / oldstyles.css elsewhere
   in this migration and no longer exist under those names, so this
   page was rendering completely unstyled (both links 404). Every
   class this page uses already existed in oldstyles.css (same
   design system as blog.html/pricing.html) and is migrated verbatim
   below: .docs-layout, .docs-sidebar, .docs-content, .docs-list,
   and .code-card.

   .section-kicker and .docs-list each had two separate rules in
   oldstyles.css that set different, non-overlapping properties on
   the same class (the file loaded them as one cascade). They're
   merged here into a single rule with the combined properties,
   same as was done for blog.css's .section-kicker.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --panel: rgba(255, 255, 255, 0.05);
  --text: #f7f3f0;
  --muted: #b9b4b0;
  --accent: #4f9bd0;
  --accent-strong: #ff7a24;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--bg);
}

.docs-body {
  background: #000;
}

/* Back-to-top button (rendered by the shared footer include on every
   page; common.css is commented out on this page, so it needs its
   own styling here or it renders as an unstyled native button). */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  width: 44px;
  height: 44px;
  border: none;
  outline: none;
  border-radius: 50%;
  background: #0ea5e9;
  color: #e5e7eb;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-weight: 700;
  line-height: 1;
  font-size: 18px;
}

#myBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(3, 105, 161, 0.35);
  background: #0284c7;
}

#myBtn:active,
#myBtn:focus {
  background: #0369a1;
  color: #e5e7eb;
  outline: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

#myBtn i {
  display: none;
}

/* ------------------------------------------------------------
   Layout: fixed sidebar + content column
   ------------------------------------------------------------ */
.docs-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.docs-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 118px 28px 34px;
  background: #050505;
  background-color: rgba(79, 155, 208, 0.2);
  background-image: linear-gradient(180deg, rgba(79, 155, 208, 0.2), rgba(0, 0, 0, 0.08) 46%);
}

.docs-sidebar nav {
  display: grid;
  gap: 8px;
}

.docs-sidebar nav a {
  display: block;
  padding: 10px 0;
  color: var(--muted);
  font-size: 0.96rem;
  text-decoration: none;
}

.docs-sidebar nav a:hover,
.docs-sidebar nav a:focus-visible {
  color: var(--accent);
  outline: none;
}

/* ------------------------------------------------------------
   Content column
   ------------------------------------------------------------ */
.docs-content {
  width: min(860px, calc(100% - 56px));
  padding: 136px 0 96px;
  margin: 0 auto;
}

.docs-content section {
  padding: 34px 0 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  scroll-margin-top: 24px;
}

.docs-content h1,
.docs-content h2 {
  max-width: 720px;
  margin: 0 0 18px;
  font-weight: 400;
  letter-spacing: 0;
}

.docs-content h1 {
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  line-height: 1;
}

.docs-content h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

/* Shared with blog.html's kicker; merged from two rules in
   oldstyles.css (see header note above). */
.section-kicker {
  max-width: 720px;
  margin: 0 0 46px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.docs-content p {
  max-width: 700px;
  color: #c8d4cd;
  font-size: 1.04rem;
  line-height: 1.72;
}

.docs-content code {
  color: #d8ecfb;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.94em;
}

/* Merged from two rules in oldstyles.css: shared sizing/color with
   .docs-content p, plus its own padding-left. */
.docs-list {
  max-width: 700px;
  padding-left: 22px;
  color: #c8d4cd;
  font-size: 1.04rem;
  line-height: 1.72;
}

.docs-list li {
  margin: 8px 0;
}

.code-card {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(79, 155, 208, 0.22);
  border-radius: 8px;
  background: #070f14;
}

.code-card code {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    position: static;
    height: auto;
    padding: 22px 22px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .docs-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
  }

  .docs-content {
    width: min(100% - 36px, 860px);
    padding-top: 24px;
  }
}

/* Scoped fix for docs.html (body.docs-body).
   common.css sets overflow-x:hidden on BOTH html and body. Per the CSS
   overflow spec, setting one axis to a non-visible value forces the other
   axis to compute as "auto" on that same element. That makes html AND body
   each become independent scroll containers — which is the double
   scrollbar. It also breaks position:sticky on .docs-sidebar, because
   sticky positions against the nearest scrolling ancestor, and with two
   scrolling ancestors stacked on top of each other the sidebar sticks to
   the wrong one.

   Fix: make body not a scroll container so html is the only one. With a
   single scroll container, the existing position:sticky on .docs-sidebar
   (defined in styles.css) sticks correctly and there is only one
   scrollbar. */
body.docs-body {
  overflow: visible;
}