/* ====================================================================
 * URDF Studio — Docs stylesheet.
 * Three-column grid (sidebar · article · TOC rail) on wide viewports,
 * collapsing to a single column on mobile. Light/dark via
 * prefers-color-scheme.
 * ==================================================================== */

:root {
  color-scheme: light dark;

  --us-bg:            light-dark(#ffffff, #131314);
  --us-bg-elevated:   light-dark(#f8f9fa, #1e1f20);
  --us-bg-subtle:     light-dark(#f1f3f4, #28292a);
  --us-surface:       light-dark(#ffffff, #1e1f20);
  --us-fg:            light-dark(#1f1f1f, #e3e3e3);
  --us-fg-muted:      light-dark(#5f6368, #9aa0a6);
  --us-fg-faint:      light-dark(#80868b, #80868b);
  --us-border:        light-dark(#e8eaed, #3c4043);
  --us-border-strong: light-dark(#dadce0, #5f6368);
  --us-accent:        light-dark(#1a73e8, #8ab4f8);
  --us-accent-hover:  light-dark(#1967d2, #aecbfa);
  --us-accent-soft:   light-dark(rgba(26, 115, 232, 0.08), rgba(138, 180, 248, 0.12));
  --us-on-accent:     light-dark(#ffffff, #062e6f);
  --us-code-bg:       light-dark(#f6f8fa, #1a1b1c);
  --us-shadow-sm: light-dark(
    0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.3),     0 1px 3px 1px rgba(0, 0, 0, 0.15)
  );

  --us-font-sans: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --us-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --us-radius-sm: 6px;
  --us-radius-md: 10px;
  --us-radius-lg: 16px;
  --us-radius-pill: 999px;
}

/* Honour an explicit data-theme override set by the web app (the docs
   site is served alongside the app and reuses the same theme choice
   when navigated within the same origin, but the toggle button itself
   only lives in the app — that's fine: the docs follow the OS until
   the user visits the app, then both align). */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--us-font-sans);
  background: var(--us-bg);
  color: var(--us-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  --grad-1: light-dark(rgba(26, 115, 232, 0.06), rgba(138, 180, 248, 0.06));
  --grad-2: light-dark(rgba(168, 67, 233, 0.04), rgba(197, 138, 248, 0.04));
  background:
    radial-gradient(1200px 600px at 8% -20%, var(--grad-1), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--grad-2), transparent 60%);
}

a {
  color: var(--us-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== Header ===== */

.docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--us-border);
  background: color-mix(in srgb, var(--us-bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.docs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--us-fg);
}

.docs-brand:hover {
  text-decoration: none;
}

.docs-brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--us-radius-sm);
  box-shadow: 0 0 0 1px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
}

.docs-nav-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-nav-top a {
  padding: 6px 14px;
  border-radius: var(--us-radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--us-fg-muted);
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.docs-nav-top a:hover {
  background: var(--us-bg-subtle);
  color: var(--us-fg);
  text-decoration: none;
}

.docs-nav-top a.docs-cta {
  background: var(--us-accent);
  color: var(--us-on-accent);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.18), 0 1px 3px 1px rgba(26, 115, 232, 0.1);
}

.docs-nav-top a.docs-cta:hover {
  background: var(--us-accent-hover);
  color: var(--us-on-accent);
}

/* ===== Three-column shell ===== */

.docs-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 0 32px;
}

/* ===== Sidebar ===== */

.docs-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  align-self: start;
  padding: 32px 16px 64px 0;
  overflow-y: auto;
  border-right: 1px solid var(--us-border);
}

.docs-sidebar-group {
  margin-bottom: 20px;
}

.docs-sidebar-group h4 {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--us-fg-faint);
}

.docs-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-sidebar li {
  margin: 1px 0;
}

.docs-sidebar a {
  display: block;
  padding: 6px 12px;
  border-radius: var(--us-radius-sm);
  color: var(--us-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.docs-sidebar a:hover {
  background: var(--us-bg-subtle);
  text-decoration: none;
}

.docs-sidebar li.active a {
  background: var(--us-accent-soft);
  color: var(--us-accent);
  font-weight: 500;
  position: relative;
}

.docs-sidebar li.active a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--us-accent);
  border-radius: 0 2px 2px 0;
}

/* ===== Main article ===== */

.docs-main {
  padding: 32px 0 64px;
  min-width: 0;
}

.docs-article {
  max-width: 760px;
  font-size: 15px;
}

.docs-article h1,
.docs-article h2,
.docs-article h3,
.docs-article h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  scroll-margin-top: 80px;
}

/* ===== Scroll-driven entry animations =====
   Each h2 / h3 fades and rises slightly as it enters the viewport. Uses
   the experimental `animation-timeline: view()` from CSS Scroll-Driven
   Animations (Chrome 115+). Browsers without it just see static headings
   — the feature is purely decorative.
   prefers-reduced-motion below disables the animation everywhere. */

@keyframes docs-section-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .docs-article h2,
  .docs-article h3 {
    animation: docs-section-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .docs-article > p,
  .docs-article > table,
  .docs-article > pre,
  .docs-article > blockquote {
    animation: docs-section-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .docs-article h2,
    .docs-article h3,
    .docs-article > p,
    .docs-article > table,
    .docs-article > pre,
    .docs-article > blockquote {
      animation: none;
    }
  }
}

.docs-article h1 {
  margin: 0 0 24px;
  font-size: 36px;
  letter-spacing: -0.025em;
}

.docs-article h2 {
  margin: 48px 0 16px;
  font-size: 24px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--us-border);
}

.docs-article h3 {
  margin: 32px 0 12px;
  font-size: 18px;
}

.docs-article h4 {
  margin: 24px 0 8px;
  font-size: 16px;
  color: var(--us-fg-muted);
}

.docs-article p {
  margin: 12px 0;
}

.docs-article a.anchor {
  display: inline-block;
  margin-left: -1em;
  width: 1em;
  color: var(--us-fg-faint);
  opacity: 0;
  text-decoration: none;
  transition: opacity 100ms ease;
}

.docs-article h2:hover a.anchor,
.docs-article h3:hover a.anchor,
.docs-article h4:hover a.anchor {
  opacity: 1;
}

.docs-article ul,
.docs-article ol {
  padding-left: 28px;
  margin: 14px 0;
}

.docs-article li {
  margin: 6px 0;
}

.docs-article li > p {
  margin: 6px 0;
}

.docs-article code {
  font-family: var(--us-font-mono);
  font-size: 0.88em;
  background: var(--us-code-bg);
  border: 1px solid var(--us-border);
  padding: 1.5px 5px;
  border-radius: 4px;
}

.docs-article pre {
  background: var(--us-code-bg);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-md);
  padding: 14px 18px;
  overflow-x: auto;
  margin: 18px 0;
  box-shadow: var(--us-shadow-sm);
}

.docs-article pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}

.docs-article table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  border-radius: var(--us-radius-md);
  overflow: hidden;
  box-shadow: var(--us-shadow-sm);
}

.docs-article table thead {
  background: var(--us-bg-elevated);
}

.docs-article th,
.docs-article td {
  padding: 10px 14px;
  border: 1px solid var(--us-border);
  text-align: left;
  vertical-align: top;
}

.docs-article th {
  font-weight: 600;
  font-size: 13px;
}

.docs-article blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 4px solid var(--us-accent);
  background: var(--us-bg-elevated);
  border-radius: 0 var(--us-radius-sm) var(--us-radius-sm) 0;
  color: var(--us-fg-muted);
}

.docs-article hr {
  border: 0;
  border-top: 1px solid var(--us-border);
  margin: 32px 0;
}

/* ===== Pager (Prev/Next at the end of each page) ===== */

.docs-pager {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--us-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.docs-pager .docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-md);
  background: var(--us-surface);
  color: var(--us-fg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.docs-pager .docs-pager-link:hover {
  text-decoration: none;
  border-color: var(--us-accent);
  box-shadow: var(--us-shadow-sm);
}

.docs-pager .docs-pager-link small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--us-fg-faint);
  font-weight: 600;
}

.docs-pager .docs-pager-link span {
  font-weight: 500;
  font-size: 14px;
  color: var(--us-fg);
}

.docs-pager .docs-pager-link:nth-child(2) {
  text-align: right;
}

/* ===== Right-rail TOC ===== */

.docs-rail {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  align-self: start;
  padding: 32px 0 64px 0;
  overflow-y: auto;
}

.docs-toc h5 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--us-fg-faint);
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 1px solid var(--us-border);
}

.docs-toc li {
  margin: 1px 0;
}

.docs-toc li.depth-3 {
  padding-left: 12px;
}

.docs-toc a {
  display: block;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--us-fg-muted);
  border-radius: var(--us-radius-sm);
  line-height: 1.4;
}

.docs-toc a:hover {
  color: var(--us-fg);
  background: var(--us-bg-subtle);
  text-decoration: none;
}

/* ===== Mobile ===== */

@media (max-width: 1100px) {
  .docs-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    padding: 0 24px;
  }
  .docs-rail {
    display: none;
  }
}

@media (max-width: 760px) {
  .docs-header {
    padding: 12px 16px;
  }
  .docs-shell {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 0;
  }
  .docs-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--us-border);
    padding: 16px 0;
    margin: 0 -20px;
    padding: 16px 20px;
  }
  .docs-main {
    padding: 24px 0 48px;
  }
  .docs-article h1 {
    font-size: 28px;
  }
  .docs-article h2 {
    font-size: 21px;
  }
  .docs-pager {
    grid-template-columns: 1fr;
  }
}