/* ── Site layout styles ──────────────────────────────────── */
/* Nav, sidebar, preview box, code blocks, swatches, etc.    */

/* ── Site header ─────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 3.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 1.5rem; gap: 1rem;
  background: oklch(from var(--background) l c h / 0.88);
  backdrop-filter: blur(14px);
}

/* ── Site sidebar ────────────────────────────────────────── */
.site-sidebar {
  width: 14rem; flex-shrink: 0;
  border-right: 1px solid var(--sidebar-border);
  position: sticky; top: 3.5rem;
  height: calc(100vh - 3.5rem);
  background: var(--sidebar);
  padding: 1.25rem 0.75rem;
  overflow-y: auto;
}

/* ── Nav section heading ─────────────────────────────────── */
.nav-heading {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  padding: 0 0.75rem;
  margin: 0 0 0.375rem;
}

/* ── Header action button / link ─────────────────────────── */
.header-action {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 150ms, background 150ms;
}
.header-action:hover {
  color: var(--foreground);
  background: var(--accent);
}
.theme-toggle-btn {
  width: 2.25rem; height: 2.25rem;
  padding: 0; justify-content: center;
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* ── Cross-document view transitions ─────────────────────── */
/* Holds the old page visually until the new page is ready.  */
/* No animation — just prevents the white gap between pages. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: none;
}

/* ── Nav link ────────────────────────────────────────────── */
.nav-link {
  display: block;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  transition: all 120ms;
  line-height: 1.6;
}
.nav-link:hover { color: var(--foreground); background: var(--accent); }
.nav-link.active { color: var(--foreground); font-weight: 500; background: var(--accent); }
.nav-link.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ── Preview box ─────────────────────────────────────────── */
.preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 2.5rem 1.5rem;
  background-color: var(--background);
  background-image:
    radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

/* ── Code block ──────────────────────────────────────────── */
pre {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
}
code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
pre code { background: none; padding: 0; border: none; font-size: inherit; }
/* Override highlight.js background — use token-based muted bg instead */
pre code.hljs { background: transparent; padding: 0; }
.dim { color: var(--muted-foreground); }

/* ── Doc tabs (preview/pattern/html switcher) ────────────── */
.tab-list {
  display: inline-flex;
  background: var(--muted);
  border-radius: var(--radius-md);
  padding: 0.2rem;
  gap: 0.125rem;
  margin-bottom: 1rem;
}
.tab-btn {
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms;
  line-height: 1.6;
}
.tab-btn[aria-selected="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Token swatch ────────────────────────────────────────── */
.swatch-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ── Copy button ─────────────────────────────────────────── */
.copy-btn {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--background);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.copy-btn:hover { color: var(--foreground); }

/* ── API pill links (Web Platform APIs in spec details) ──── */
.api-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  transition: background 150ms;
}
.api-pill:hover { background: var(--accent); }
.api-pill code { font-size: inherit; background: none; border: none; padding: 0; }
.api-pill svg { width: 10px; height: 10px; opacity: 0.4; flex-shrink: 0; }

/* ── Separator ───────────────────────────────────────────── */
.sep {
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}