/* =========================================================
   HELMDECK DOCS — Layout only
   Inherits ALL design tokens from landing-v2.css.
   No new tokens, colors or fonts are defined here — this file
   only arranges the existing system into a 3-column docs page.
   ========================================================= */

/* ---- 3-column shell: nav · content · on-this-page ---- */
.docs-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 124px 28px 96px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 212px;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ---- Left navigation ---- */
.docs-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  padding-right: 8px;
}

.docs-nav-group { margin-bottom: 22px; }
.docs-nav-group-title {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.docs-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.docs-nav-list a {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--r-button);
  border-left: 2px solid transparent;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.docs-nav-list a:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}
.docs-nav-list a.active {
  color: var(--c-orange);
  background: var(--surface-2);
  border-left-color: var(--c-orange);
}

/* ---- Center content ---- */
.docs-content { min-width: 0; padding-top: 4px; }

.docs-page-head { margin-bottom: 48px; }
.docs-breadcrumb {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.docs-breadcrumb .sep { opacity: 0.6; padding: 0 6px; }

/* One module is shown at a time (hash-routed); hidden ones collapse. */
.docs-section { scroll-margin-top: 100px; padding: 4px 0 56px; }
.docs-section[hidden] { display: none; }
.docs-content .section-label { scroll-margin-top: 100px; }
.docs-section h2 { text-align: left; }
.docs-section .docs-lede {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* Readable prose — "Why it matters" and richer body copy */
.docs-prose {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.72;
  max-width: 660px;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.docs-prose strong { color: var(--text-strong); font-weight: 600; }

/* Numbered "How it works" steps */
.docs-steps {
  list-style: none;
  counter-reset: docstep;
  max-width: 680px;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.docs-steps li {
  counter-increment: docstep;
  position: relative;
  padding-left: 42px;
  min-height: 28px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.docs-steps li::before {
  content: counter(docstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--c-orange);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Nice touch" standout callout — orange left accent on existing surface */
.docs-note {
  margin: 6px 0 8px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--c-orange);
  border-radius: var(--r-window);
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 680px;
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.64;
}
.docs-note-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* Placeholder body — neutral skeleton using existing surfaces */
.docs-placeholder {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-window);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-faint);
  font-size: 14px;
}
.docs-placeholder .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ---- Right "On this page" ---- */
.docs-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
}
.docs-toc-title {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.docs-toc-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.docs-toc-list a {
  display: block;
  font-size: 13px;
  color: var(--text-faint);
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line-soft);
  transition: color 180ms ease, border-color 180ms ease;
}
.docs-toc-list a:hover { color: var(--text-muted); }
.docs-toc-list a.active {
  color: var(--c-orange);
  border-left-color: var(--c-orange);
}

/* ---- Mobile menu toggle (hidden on desktop) ---- */
.docs-menu-toggle {
  display: none;
  position: fixed;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
  top: 78px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-soft);
  color: var(--text-body);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  align-items: center;
  gap: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Mobile drawer scrim — hidden on desktop so it doesn't take a grid cell */
.docs-scrim { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .docs-toc { display: none; }
}
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); padding-top: 132px; }
  .docs-menu-toggle { display: inline-flex; }
  .docs-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: 84vw; max-width: 320px;
    max-height: none;
    background: var(--bg-1);
    border-right: 1px solid var(--vio-line);
    padding: 88px 20px 28px;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.22,1,0.36,1);
    z-index: 98;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-shadow: none;
  }
  .docs-sidebar.open {
    transform: translateX(0);
    box-shadow: 22px 0 60px rgba(0,0,0,0.55);
  }

  /* backdrop scrim behind the drawer */
  .docs-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 240ms ease;
    z-index: 97;
  }
  .docs-scrim.open { opacity: 1; pointer-events: auto; touch-action: none; }

  /* toggle button reflects open state */
  .docs-menu-toggle.active {
    background: var(--grad-violet);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 26px rgba(139,92,246,0.45);
  }
}

/* =========================================================================
   APP-FAITHFUL RE-SKIN — Helmdeck "Board" visual language
   The docs page borrows the app's identity: violet primary, cool near-black
   surfaces, gradient pills, and per-section category accents that echo the
   Kanban columns. Scoped to docs only (this file loads after landing-v2.css,
   on docs.html alone), so the marketing landing is untouched.
   ========================================================================= */
:root {
  /* Primary accent → app violet. Everything that keyed off the warm orange
     (nav, dots, sidebar, TOC, steps, bullets) flips to violet in one move. */
  --c-orange:   #8b5cf6;

  --vio-1:      #7c3aed;
  --vio-2:      #a855f7;
  --vio-soft:   rgba(139,92,246,0.14);
  --vio-line:   rgba(139,92,246,0.40);
  --grad-violet: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);

  /* Atmosphere: keep the background a clean, flat dark (no violet haze) */
  --halo-tint:  rgba(139,92,246,0.18);
  --mesh-1:     rgba(139,92,246,0.02);
  --mesh-2:     rgba(124,58,237,0.015);
  --mesh-3:     rgba(168,85,247,0.015);

  /* Category accents — mirror the board column dots, in nav-group order */
  --cat-overview:     #22d3ee;  /* cyan    */
  --cat-core:         #e879f9;  /* magenta */
  --cat-automation:   #fb7185;  /* rose    */
  --cat-integrations: #a78bfa;  /* violet  */
  --cat-collab:       #60a5fa;  /* blue    */
  --cat-platform:     #34d399;  /* green   */
}

/* Cool, app-like neutrals on dark — strips the cream "paper" warmth */
[data-theme="dark"] {
  --bg-0:        #08080b;
  --bg-1:        #0c0c10;
  --bg-2:        #131318;
  --surface:     rgba(18,18,23,0.92);
  --surface-2:   rgba(28,28,36,0.82);
  --line-soft:   rgba(255,255,255,0.07);
  --line-mid:    rgba(255,255,255,0.11);

  --text-strong: rgba(238,239,245,1);
  --text-body:   rgba(223,225,234,0.90);
  --text-muted:  rgba(226,228,240,0.52);
  --text-faint:  rgba(226,228,240,0.30);
}

/* ---- Kill the ambient mesh glow entirely on docs (flat dark background) ---- */
.bg-mesh { display: none; }

/* ---- Page intro eyebrow + title ---- */
.docs-page-hero .section-label { letter-spacing: 0.14em; }
.docs-page-hero .label-dot { box-shadow: 0 0 10px 0 var(--vio-2); }
.docs-page-hero h2 {
  background: linear-gradient(180deg, var(--text-strong) 30%, rgba(168,85,247,0.92) 165%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Left rail: echo the Kanban columns ---- */
.docs-nav-group {
  padding-left: 14px;
  margin-left: 0;
  box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--cat, var(--c-orange)) 55%, transparent);
  border-radius: 1px;
}
.docs-nav-group:nth-of-type(1) { --cat: var(--cat-overview); }
.docs-nav-group:nth-of-type(2) { --cat: var(--cat-core); }
.docs-nav-group:nth-of-type(3) { --cat: var(--cat-automation); }
.docs-nav-group:nth-of-type(4) { --cat: var(--cat-integrations); }
.docs-nav-group:nth-of-type(5) { --cat: var(--cat-collab); }
.docs-nav-group:nth-of-type(6) { --cat: var(--cat-platform); }

.docs-nav-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-nav-group-title::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat, var(--c-orange));
  box-shadow: 0 0 10px -1px var(--cat, var(--c-orange));
  flex-shrink: 0;
}

/* Active item = violet gradient pill with a soft glow (the app's "Board" pill) */
.docs-nav-list a {
  border-left: none;
  border-radius: var(--r-button);
}
.docs-nav-list a.active {
  color: #fff;
  background: var(--grad-violet);
  border-left-color: transparent;
  box-shadow:
    0 6px 18px rgba(124,58,237,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.docs-nav-list a.active:hover { color: #fff; background: var(--grad-violet); }

/* ---- Section eyebrows + bullets pick up the violet accent automatically;
        give the eyebrow dot a faint glow to match the app ---- */
.docs-section .label-dot { box-shadow: 0 0 8px -1px var(--vio-2); }

/* ---- "How it works" step numbers → filled violet gradient chips ---- */
.docs-steps li::before {
  background: var(--grad-violet);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ---- "Nice touch" callout → violet wash + accent edge ---- */
.docs-note {
  border-color: var(--vio-line);
  border-left: 3px solid var(--vio-2);
  background:
    linear-gradient(180deg, rgba(139,92,246,0.10), rgba(139,92,246,0.03)),
    var(--surface);
}
.docs-note-tag { letter-spacing: 0.1em; }

/* ---- Right "On this page" active marker → violet (inherited) ---- */
.docs-toc-list a.active { border-left-color: var(--vio-2); }

/* ---- Requirements / neutral callouts get a cool violet dot ---- */
.docs-placeholder .dot { box-shadow: 0 0 8px -1px var(--vio-2); }

/* ---- Each module wears its category color, like a Kanban column ---- */
.docs-section { position: relative; }
.docs-section::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 48px; height: 3px;
  border-radius: 3px;
  background: var(--cat, var(--c-orange));
  box-shadow: 0 0 12px -1px var(--cat, var(--c-orange));
}
#app-shell                 { --cat: var(--cat-overview); }
#skills, #sessions,
#terminal, #contexts       { --cat: var(--cat-core); }
#pipelines, #smart-pipeline-generator,
#board, #worktrees         { --cat: var(--cat-automation); }
#mcp, #notifications       { --cat: var(--cat-integrations); }
#workspaces, #cloud        { --cat: var(--cat-collab); }
#auth-onboarding,
#localization-release      { --cat: var(--cat-platform); }

/* ---- Top nav: the active "Docs" link becomes an app pill ---- */
.nav-docs.active {
  color: #fff;
  background: var(--grad-violet);
  box-shadow: 0 6px 16px -5px rgba(124,58,237,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nav-docs.active:hover { color: #fff; background: var(--grad-violet); }