/* ============================================================
   strebcli documentation — main.css
   Sections:
     1. Reset / base
     2. Custom properties
     3. Dark mode
     4. Base styles
     5. Layout
     6. Header & nav
     7. Mobile nav
     8. Hero
     9. Stat strip
    10. Feature cards
    11. Buttons
    12. Code blocks
    13. Tabbed code
    14. Tables
    15. Callouts
    16. Docs layout (sidebar TOC)
    17. Footer
    18. Install tabs
    19. Hero terminal specifics
    20. Step list
    21. Responsive
    22. Reduced motion
   ============================================================ */

/* ============================================================
   1. Reset / base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

/* ============================================================
   2. Custom properties
   ============================================================ */
:root {
  /* --- Light theme colours --- */
  --bg: #ffffff;
  --surface: #f8fafc;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  /* --accent: #16a34a; */
  --accent: #006EC7;
  --accent-hover: #1a7dce;
  --term-green: #3b9eff;
  --code-bg: #f1f5f9;
  --header-bg: rgba(255, 255, 255, 0.85);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Typography --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Layout --- */
  --container: 72rem;
  --content: 46rem;
  --radius: 0.375rem;
  --radius-lg: 0.75rem;

  /* --- Transitions --- */
  --transition: 150ms ease;
  --transition-md: 250ms ease;
}

/* ============================================================
   3. Dark mode
   ============================================================ */

/* System preference dark — unless user has explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f14;
    --surface: #111827;
    --border: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #006EC7;
    --accent-hover: #1a7dce;
    /* --accent: #22c55e;
    --accent-hover: #4ade80; */
    --term-green: #3b9eff;
    --code-bg: #1e293b;
    --header-bg: rgba(10, 15, 20, 0.9);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark theme (overrides system preference) */
[data-theme="dark"] {
  --bg: #0a0f14;
  --surface: #111827;
  --border: #1e293b;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  /* --accent: #22c55e;
  --accent-hover: #4ade80; */
  --accent: #006EC7;
  --accent-hover: #1a7dce;
  --term-green: #3b9eff;
  --code-bg: #1e293b;
  --header-bg: rgba(10, 15, 20, 0.9);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Explicit light theme (overrides system preference) */
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  /* --accent: #16a34a;
  --accent-hover: #15803d; */
  --accent: #006EC7;
  --accent-hover: #1a7dce;
  --term-green: #3b9eff;
  --code-bg: #f1f5f9;
  --header-bg: rgba(255, 255, 255, 0.85);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   4. Base styles
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  transition: background-color var(--transition-md), color var(--transition-md);
  min-height: 100vh;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--text);
}

h1 { font-size: clamp(1.875rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Margin top for headings inside article/prose */
article h2,
.prose h2 { margin-top: var(--space-12); }

article h3,
.prose h3 { margin-top: var(--space-8); }

article h4,
.prose h4 { margin-top: var(--space-6); }

article h2:first-child,
article h3:first-child,
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

/* Paragraph spacing in prose */
article p,
.prose p { margin-top: var(--space-4); }

article p:first-child,
.prose p:first-child { margin-top: 0; }

/* Lists in prose */
article ul,
article ol,
.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-top: var(--space-3);
}

article ul { list-style: disc; }
article ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

article li,
.prose li {
  margin-top: var(--space-2);
}

/* Links */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

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

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ============================================================
   5. Layout
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.content {
  max-width: var(--content);
}

.section {
  padding: var(--space-16) 0;
}

.section-sm {
  padding: var(--space-12) 0;
}

/* ============================================================
   6. Header & nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background var(--transition-md), border-color var(--transition-md);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  gap: var(--space-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.nav-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav-logo img,
.nav-logo svg {
  width: auto;
  height: 2rem;
}

/* PNG logo mark + wordmark (sourced from strebcli.dev) */
.nav-logo .logo-mark {
  border-radius: 6px;
  flex-shrink: 0;
}

.nav-logo .logo-word {
  letter-spacing: -0.01em;
}

/* Nav links row */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--accent);
}

.nav-link.active::after {
  transform: scaleX(1);
}

/* CTA button in nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: #fff !important;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--accent-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Theme toggle */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
  flex-shrink: 0;
}

#theme-toggle:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--accent);
}

#theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hamburger button — hidden by default, shown at ≤768px */
#nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition);
}

#nav-toggle:hover {
  border-color: var(--accent);
}

.hamburger-bar {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition-md), opacity var(--transition-md);
}

#nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

#nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   7. Mobile nav
   ============================================================ */
#mobile-nav {
  display: none;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

#mobile-nav.open {
  display: block;
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav-links .nav-link {
  display: block;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
}

.mobile-nav-links .nav-link::after {
  display: none;
}

.mobile-nav-cta {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* ============================================================
   8. Hero
   ============================================================ */
.hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

/* Subtle grid texture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--border) 1px,
    transparent 0
  );
  background-size: 32px 32px;
  opacity: 0.4;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: 99px;
}

.hero-title {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero-title .accent {
  color: var(--accent);
}

.hero-description {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Terminal window */
.hero-terminal {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.term-window {
  width: 100%;
  max-width: 34rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  font-family: var(--font-mono);
}

/* Terminal title bar */
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.term-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.term-dot-red    { background: #ff5f57; }
.term-dot-yellow { background: #febc2e; }
.term-dot-green  { background: #28c840; }

.term-title {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  color: #6e7681;
  font-family: var(--font-mono);
}

/* Terminal body */
.term-body {
  padding: var(--space-4) var(--space-5);
  min-height: 280px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #e6edf3;
  overflow-y: auto;
  max-height: 400px;
}

.term-line {
  display: block;
  white-space: pre;
}

.term-line.term-cmd {
  color: #e6edf3;
}

.term-line.term-ok {
  color: var(--term-green);
}

.term-line.term-muted {
  color: #6e7681;
}

.term-line.term-warn {
  color: #d29922;
}

.term-line.term-err {
  color: #f85149;
}

/* Fallback static content */
#hero-terminal-output {
  display: none;
}

#hero-terminal-static {
  display: block;
}

/* ============================================================
   9. Stat strip
   ============================================================ */
.stats-strip {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-number {
  font-size: clamp(3.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--accent);
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0 0 20px;
}

.stat-label {
  font-size: 1.125rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   10. Feature cards
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-md), transform var(--transition-md),
    border-color var(--transition-md);
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.card-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.card-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.card-description {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

/* ============================================================
   11. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
  white-space: nowrap;
  user-select: none;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-outline:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1.0625rem;
}

/* ============================================================
   12. Code blocks
   ============================================================ */

/* Wrapper */
.code-block {
  margin: var(--space-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--code-bg);
}

/* Header bar with language label + copy button */
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-bottom: 1px solid var(--border);
}

.code-lang {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
  font-family: var(--font-sans);
}

.copy-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.copy-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* The pre element */
pre {
  overflow-x: auto;
  padding: var(--space-4) var(--space-5);
  background: var(--code-bg);
  margin: 0;
  tab-size: 2;
}

pre code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  line-height: 1.7;
  color: var(--text);
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: pre;
}

/* Standalone pre without .code-block wrapper */
:not(.code-block) > pre {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

/* Inline code */
code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--code-bg);
  color: var(--term-green);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Syntax hint classes (light highlight, not full Prism) */
.token-comment  { color: var(--text-muted); font-style: italic; }
.token-string   { color: #22c55e; }
.token-keyword  { color: #818cf8; }
.token-number   { color: #fb923c; }
.token-function { color: #38bdf8; }

/* ============================================================
   13. Tabbed code blocks (radio-input CSS — no JS needed)
   ============================================================ */
.tab-group {
  margin: var(--space-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Hide the radio inputs visually but keep them accessible */
.tab-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Tab label row */
.tab-labels {
  display: flex;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-labels::-webkit-scrollbar {
  display: none;
}

.tab-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
  font-family: var(--font-mono);
  user-select: none;
}

.tab-label:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
}

/* Show tab panels — each radio controls its panel via adjacent-sibling */
.tab-panels {
  background: var(--code-bg);
}

.tab-panel {
  display: none;
}

/* Wire up each tab: input:checked → matching label active state */
/* Supports up to 6 tabs by convention */
.tab-group input[type="radio"]:nth-of-type(1):checked ~ .tab-labels .tab-label:nth-child(1),
.tab-group input[type="radio"]:nth-of-type(2):checked ~ .tab-labels .tab-label:nth-child(2),
.tab-group input[type="radio"]:nth-of-type(3):checked ~ .tab-labels .tab-label:nth-child(3),
.tab-group input[type="radio"]:nth-of-type(4):checked ~ .tab-labels .tab-label:nth-child(4),
.tab-group input[type="radio"]:nth-of-type(5):checked ~ .tab-labels .tab-label:nth-child(5),
.tab-group input[type="radio"]:nth-of-type(6):checked ~ .tab-labels .tab-label:nth-child(6) {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* Show the active panel */
.tab-group input[type="radio"]:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-child(1),
.tab-group input[type="radio"]:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-child(2),
.tab-group input[type="radio"]:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-child(3),
.tab-group input[type="radio"]:nth-of-type(4):checked ~ .tab-panels .tab-panel:nth-child(4),
.tab-group input[type="radio"]:nth-of-type(5):checked ~ .tab-panels .tab-panel:nth-child(5),
.tab-group input[type="radio"]:nth-of-type(6):checked ~ .tab-panels .tab-panel:nth-child(6) {
  display: block;
}

.tab-panel pre {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* ============================================================
   14. Tables
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

thead {
  background: var(--surface);
}

thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

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

/* ============================================================
   15. Callouts / admonitions
   ============================================================ */
.callout {
  border-left: 4px solid var(--border);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-4) 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.callout strong:first-child {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.callout-note {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.callout-note strong:first-child {
  color: var(--accent);
}

.callout-warning {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 6%, var(--surface));
}

.callout-warning strong:first-child {
  color: #d97706;
}

[data-theme="dark"] .callout-warning strong:first-child {
  color: #fbbf24;
}

.callout-tip {
  border-left-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 6%, var(--surface));
}

.callout-tip strong:first-child {
  color: #2563eb;
}

[data-theme="dark"] .callout-tip strong:first-child {
  color: #60a5fa;
}

.callout p:first-of-type {
  margin-top: 0;
}

/* ============================================================
   16. Docs layout (two-column with sticky TOC)
   ============================================================ */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  align-items: start;
}

/* TOC sidebar */
.toc {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.toc::-webkit-scrollbar {
  width: 4px;
}

.toc::-webkit-scrollbar-track {
  background: transparent;
}

.toc::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.toc-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.toc-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-item-h3 {
  padding-left: var(--space-4);
}

.toc-link {
  display: block;
  padding: var(--space-1) var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  border-left: 2px solid transparent;
}

.toc-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.toc-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 500;
}

/* Docs content */
.docs-content {
  min-width: 0; /* prevent grid blowout */
}

.docs-content article {
  max-width: var(--content);
}

/* TOC as <details> — visible only when sidebar is hidden (≤1024px) */
.toc-details {
  display: none;
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.toc-details summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  background: var(--surface);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.toc-details summary::after {
  content: "▾";
  color: var(--text-muted);
  transition: transform var(--transition);
}

.toc-details[open] summary::after {
  transform: rotate(180deg);
}

.toc-details .toc-list {
  padding: var(--space-3) var(--space-4);
}

/* Docs page sidebar nav */
.docs-sidebar-nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-6);
}

.docs-sidebar-nav .nav-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-2) var(--space-2);
}

.docs-sidebar-nav .nav-section-title:first-child {
  margin-top: 0;
}

.docs-sidebar-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}

.docs-sidebar-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.docs-sidebar-link.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 500;
}

/* ============================================================
   17. Footer
   ============================================================ */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-brand .nav-logo {
  font-size: 1.0625rem;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 18rem;
}

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.footer-legal-links a {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal-links a:hover {
  color: var(--accent);
}

/* ============================================================
   18. Install tabs (getting-started page — same tab-group pattern)
   ============================================================ */

/* The install tabs reuse .tab-group entirely.
   Additional styling for the install section wrapper: */
.install-section {
  padding: var(--space-16) 0;
}

.install-intro {
  max-width: var(--content);
  margin: 0 auto var(--space-8);
  text-align: center;
}

.install-intro h2 {
  margin-bottom: var(--space-4);
}

.install-intro p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.install-tab-group {
  max-width: 50rem;
  margin: 0 auto;
}

/* OS icons in tab labels */
.tab-label-os {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   19. Hero terminal specifics — cursor + line animations
   ============================================================ */
.term-cursor {
  display: inline-block;
  color: var(--term-green);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Success line marker (CSS-only fallback variant) */
.term-line-success {
  color: var(--term-green);
}

.term-line-success::before {
  content: "  \2713  ";
  color: var(--term-green);
}

/* Prompt symbol */
.term-prompt {
  color: var(--accent);
  user-select: none;
}

/* ============================================================
   20. Step list (vertical pipeline)
   ============================================================ */
.step-list {
  list-style: none;
  padding: 0;
  counter-reset: step;
  position: relative;
}

.step-item {
  counter-increment: step;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}

.step-item:last-child {
  padding-bottom: 0;
}

/* Vertical connector line */
.step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.25rem - 1px);
  top: 2.5rem;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

/* Step number bubble */
.step-number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  position: relative;
  z-index: 1;
}

.step-content {
  flex: 1;
  padding-top: 0.375rem;
  padding-bottom: var(--space-2);
}

.step-content h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
  margin-top: 0;
}

.step-content p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: 0;
}

/* ============================================================
   21. Responsive media queries
   ============================================================ */

/* ---- ≤768px — mobile ---- */
@media (max-width: 768px) {
  /* Show hamburger, hide desktop nav links */
  #nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  /* Hero: stack vertically */
  .hero {
    min-height: auto;
    padding: var(--space-12) 0;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-terminal {
    order: -1; /* terminal above text on mobile */
  }

  /* Reduce font sizes */
  .hero-description {
    font-size: 1rem;
  }

  /* Feature grid: 1 column, cards centered */
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    align-items: center;
    text-align: center;
  }

  /* Stats: 1 column, centered */
  .stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  /* Docs: single column */
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    display: none;
  }

  .toc-details {
    display: block;
  }

  /* Footer: 2 columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Section padding reduction */
  .section {
    padding: var(--space-12) 0;
  }

  .section-sm {
    padding: var(--space-8) 0;
  }

  /* Term window: full width */
  .term-window {
    max-width: 100%;
  }
}

/* ---- 769–1024px — tablet ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 2-column feature grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Docs still single column at tablet */
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    display: none;
  }

  .toc-details {
    display: block;
  }

  /* Footer: collapse a bit */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---- >1024px — desktop ---- */
@media (min-width: 1025px) {
  /* 3+ column feature grid */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Docs 2-column */
  .docs-layout {
    grid-template-columns: 240px 1fr;
  }

  .toc-details {
    display: none;
  }
}

/* ---- Larger desktop ---- */
@media (min-width: 1280px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .footer-grid {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

/* ============================================================
   22. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Utilities
   ============================================================ */

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text align */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Section heading groupings */
.section-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-12);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 0;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

/* Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--font-mono);
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Divider with label */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: var(--space-6) 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* Command pill (used in docs) */
.cmd-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  color: var(--term-green);
}

/* Page header (docs pages) */
.page-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
}

.page-header h1 {
  margin-bottom: var(--space-3);
}

.page-header .lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 40rem;
  line-height: 1.7;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  list-style: none;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--border);
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* 404 page */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-4);
}

.error-code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.05em;
}

.error-message {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 30rem;
}

/* Pagination (docs prev/next) */
.doc-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.doc-pagination-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  max-width: 48%;
  transition: border-color var(--transition), background var(--transition);
}

.doc-pagination-link:hover {
  border-color: var(--accent);
  background: var(--surface);
  text-decoration: none;
}

.doc-pagination-link.prev {
  align-items: flex-start;
}

.doc-pagination-link.next {
  align-items: flex-end;
  margin-left: auto;
}

.doc-pagination-dir {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
}

.doc-pagination-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   23. Homepage sections (index.html)
   ============================================================ */

/* Vertical rhythm for the homepage sections
   (.install-section already defines its own padding above) */
.features,
.steps-section {
  padding: var(--space-16) 0;
}

/* Feature cards on the homepage use emoji glyphs rather than SVG —
   give the icon container a sensible glyph size. */
.card-icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* "Read more" links under the install / steps sections */
.install-more,
.steps-more {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 0.9375rem;
}

/* Call-to-action band */
.cta-section {
  padding: var(--space-16) 0;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.cta-inner h2 {
  max-width: 28rem;
}

/* ============================================================
   24. Shared-component fixes (apply to every page)
   ============================================================ */

/* Hamburger bars — the markup uses bare <span> elements inside
   #nav-toggle, so target them directly. */
#nav-toggle > span {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition-md), opacity var(--transition-md);
}

#nav-toggle[aria-expanded="true"] > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nav-toggle[aria-expanded="true"] > span:nth-child(2) {
  opacity: 0;
}

#nav-toggle[aria-expanded="true"] > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav links */
.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-2);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}

.mobile-nav-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

/* Footer column titles (markup uses .footer-nav-title) */
.footer-nav-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: var(--space-3);
}