/* ============================================================
   cpe-labs site overlay styles.
   Theme-agnostic: works on mkdocs-shadcn (current) and previously
   on mkdocs-material. Material-specific .md-* rules have been
   stripped; shadcn theme tokens drive base typography + chrome.
   ============================================================ */

/* ----------------------------- Width override ----------------------- */
/* mkdocs-shadcn caps .container-wrapper via Tailwind's max-w-screen-*
   utilities at every breakpoint (sm 640, md 768, lg 1024, xl 1280,
   2xl 1536, 3xl 1600). Blow them all away so the wrapper spans the full
   viewport. The article inside is already w-full so content widens with
   the wrapper. */

.container-wrapper {
  max-width: 100% !important;
  width: 100% !important;
}

/* Push the sidebar+content grid to use available width too. The grid
   uses [--sidebar-width:240px] minmax(0,1fr), so removing nothing here —
   minmax already expands. But the sidebar wrapper inherits container
   constraints, so unbox it explicitly. */
[data-slot="sidebar-wrapper"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* The shadcn theme caps <article> at max-w-2xl (672px) via tailwind/article.css.
   Push that to 1200px which is a comfortable line length for technical docs
   with code blocks. Adjust this single value if you want it tighter/wider. */
article {
  max-width: 1200px !important;
}

.typography {
  max-width: none !important;
}

footer {
  display: none !important;
}

/* ============================================================
   Code blocks. The shadcn theme only styles direct-child <pre>
   (`article > pre`), but pymdownx wraps fenced blocks in
   <div class="highlight"><pre>...</pre></div>, so the background
   never lands. Restyle every <pre> + give it a visible card
   look + room for a copy button.
   ============================================================ */

article pre,
article .highlight pre,
article .codehilite pre {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #1e293b;
  border-radius: 10px !important;
  padding: 1rem 1.1rem !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  overflow-x: auto;
  position: relative;
}

article pre code,
article .highlight pre code,
article .codehilite pre code {
  color: inherit !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Inline code: a quieter chip, distinct from block code. */
article code:not(pre code) {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.18);
  padding: 0.08rem 0.35rem !important;
  border-radius: 5px !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.82em !important;
}

/* Per-block copy button (injected by assets/js/copy-code.js). */
.cpelabs-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease;
  z-index: 2;
}

article pre:hover .cpelabs-copy-btn,
article .highlight:hover .cpelabs-copy-btn,
article .codehilite:hover .cpelabs-copy-btn {
  opacity: 1;
}

.cpelabs-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.cpelabs-copy-btn[data-state="copied"] {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  opacity: 1;
}

.cpelabs-copy-btn svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
   Heading polish — make h2 / h3 visually punchier than the
   default shadcn typography. Accent bar on h2, accent dot on
   h3, tighter weight + tracking, and an eyebrow color for
   numbered list items in the architecture anchors.
   ============================================================ */

article #page-header h1 {
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

article .typography h2 {
  position: relative;
  padding-left: 1.1rem;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
}

article .typography h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  bottom: 0.32em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2563EB 0%, #60A5FA 100%);
}

article .typography h3 {
  position: relative;
  padding-left: 0.95rem;
  font-weight: 600 !important;
  letter-spacing: -0.014em !important;
  font-size: 1.18rem !important;
  line-height: 1.3 !important;
}

article .typography h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

article .typography h4 {
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: #475569;
  text-transform: none;
  font-size: 1rem !important;
}

/* Permalink anchors — tone them down so they don't compete with the heading. */
article .typography h2 a.headerlink,
article .typography h3 a.headerlink,
article .typography h4 a.headerlink {
  opacity: 0;
  transition: opacity 160ms ease;
  margin-left: 0.4rem;
  font-weight: 400;
}

article .typography h2:hover a.headerlink,
article .typography h3:hover a.headerlink,
article .typography h4:hover a.headerlink {
  opacity: 0.55;
}

/* ----------------------------- Hero block ---------------------------- */

.cpelabs-home {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin: 1.2rem 0 2.4rem;
  padding: 2rem 1.5rem 2.4rem;
  min-height: 600px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .cpelabs-home {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cpelabs-home__copy {
  position: relative;
  z-index: 10;
  max-width: 36rem;
}

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

.cpelabs-kicker {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.cpelabs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

@media (max-width: 640px) {
  .cpelabs-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .cpelabs-actions .cpelabs-btn {
    justify-content: center;
    width: 100%;
  }
}

.cpelabs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid currentColor;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.cpelabs-btn--primary {
  color: #ffffff;
  background: #2563EB;
  border-color: #2563EB;
}

.cpelabs-btn--primary:hover {
  background: #1E40AF;
  border-color: #1E40AF;
  transform: translateY(-1px);
}

.cpelabs-btn--ghost {
  color: inherit;
  background: transparent;
  border-color: rgba(127, 127, 127, 0.35);
}

.cpelabs-btn--ghost:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}

.cpelabs-signal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.2rem 0 0;
}

.cpelabs-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ----------------------------- Card grid ----------------------------- */

.cpelabs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0 2.6rem;
}

.cpelabs-card {
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(127, 127, 127, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.cpelabs-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.cpelabs-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ============================================================
   Hero topology tree (DOM nodes + SVG edges + CSS-3D camera)
   ============================================================ */

.hero-stage {
  position: absolute;
  inset: 0;
  perspective: 4000px;
  perspective-origin: 50% 35%;
  overflow: hidden;
  z-index: 1;
  pointer-events: auto;
}

.hero-stage-inner {
  position: absolute;
  /* Anchor biased to the right of the stage so the camera parks focused
     nodes in the right half, leaving the headline copy room on the left. */
  left: 68%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Left-side gradient mask keeps headline copy crisp on top of the tree. */
.cpelabs-home::before {
  content: "";
  position: absolute;
  inset: 0 52% 0 0;
  background: linear-gradient(
    to right,
    var(--background, #ffffff) 0%,
    var(--background, #ffffff) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Bottom fade so the tree dissolves into the page content below. */
.cpelabs-home::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6rem;
  background: linear-gradient(
    to top,
    var(--background, #ffffff) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 1023.99px) {
  .hero-stage,
  .cpelabs-home::before,
  .cpelabs-home::after {
    display: none;
  }
}

@keyframes tree-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05); }
  50%      { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 1px 2px rgba(10, 10, 10, 0.05); }
}

.tree-node:not(.tree-node-root).in-path:not(.focused) .tree-node-inner {
  animation: tree-pulse 2.4s ease-in-out infinite;
}

.tree-edges { overflow: visible; }

.tree-edge {
  fill: none;
  stroke: #B5B5AE;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree-edge-active {
  fill: none;
  stroke: #2563EB;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 360ms ease;
}

/* Pulse layer: a short bright segment that travels along each active leg
   like light through fibre. Cyan core + cyan glow so it reads against both
   the deeper blue line AND a white page background. Each pulse path uses
   pathLength="100" (set in JS) so the same CSS animation works regardless
   of leg length. */
.tree-edge-pulse {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 200;
  filter: drop-shadow(0 0 3px #2563EB)
          drop-shadow(0 0 6px rgba(37, 99, 235, 0.55));
  animation: edge-pulse 1.6s linear infinite;
  transition: opacity 360ms ease;
}

@keyframes edge-pulse {
  from { stroke-dashoffset: 5;    }   /* pulse just before path start */
  to   { stroke-dashoffset: -100; }   /* pulse past path end */
}

/* Stagger pulse-start across the chain so leg N+1's pulse begins where
   leg N's leaves off. Visually reads as one continuous flow root→leaf. */
.tree-edge-pulse:nth-of-type(1) { animation-delay: 0s; }
.tree-edge-pulse:nth-of-type(2) { animation-delay: 0.32s; }
.tree-edge-pulse:nth-of-type(3) { animation-delay: 0.64s; }
.tree-edge-pulse:nth-of-type(4) { animation-delay: 0.96s; }

.tree-node {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1;
  transform-style: preserve-3d;
}

.tree-node-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: #FFFFFF;
  border: 1px solid #D9D9D2;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0A0A0A;
  white-space: nowrap;
  transform: scale(1);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition:
    transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 280ms ease;
}

.tree-node-inner::before,
.tree-node-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.tree-node-inner::before {
  background: #B8B8B0;
  border: 1px solid #989892;
  transform: translateZ(-9px);
}

.tree-node-inner::after {
  background: #D0D0C8;
  border: 1px solid #B0B0A8;
  transform: translateZ(-4.5px);
}

.tree-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #0A0A0A;
}

.tree-node-icon svg { width: 100%; height: 100%; display: block; }

.tree-node-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: -8px;
  transition:
    max-width 420ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 280ms ease 80ms,
    margin-left 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.tree-node-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}

.tree-node-sub {
  font-size: 10.5px;
  color: #6B6B68;
  font-weight: 400;
  margin-top: 1px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  transition: color 220ms ease;
}

/* Root (cpe-sim): always-on dark card */
.tree-node-root .tree-node-inner {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FAFAF7;
  padding: 11px 15px;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.10),
    0 8px 24px rgba(10, 10, 10, 0.12);
}

.tree-node-root .tree-node-inner::before {
  background: #000;
  border-color: #000;
  transform: translateZ(-13px);
}

.tree-node-root .tree-node-inner::after {
  background: #1f1f1f;
  border-color: #1a1a1a;
  transform: translateZ(-6.5px);
}

.tree-node-root .tree-node-icon { color: #FAFAF7; width: 22px; height: 22px; }
.tree-node-root .tree-node-name { color: #FAFAF7; font-size: 14px; }
.tree-node-root .tree-node-sub  { color: #9BA1AB; font-size: 11px; }
.tree-node-root .tree-node-text {
  max-width: 240px;
  opacity: 1;
  margin-left: 0;
}

/* Per-level chip sizes */
.tree-node-cpe       .tree-node-inner { padding: 7px 10px; }
.tree-node-cpe       .tree-node-icon  { width: 17px; height: 17px; }

.tree-node-object    .tree-node-inner { padding: 6px 9px; border-radius: 7px; }
.tree-node-object    .tree-node-icon  { width: 15px; height: 15px; }

.tree-node-param     .tree-node-inner { padding: 6px 8px; border-radius: 7px; }
.tree-node-param     .tree-node-icon  { width: 14px; height: 14px; }

.tree-node-generator .tree-node-inner { padding: 5px 7px; border-radius: 6px; }
.tree-node-generator .tree-node-icon  { width: 12px; height: 12px; color: #2563EB; }

/* Per-level extrusion depth */
.tree-node-object    .tree-node-inner::before { transform: translateZ(-7px);   }
.tree-node-object    .tree-node-inner::after  { transform: translateZ(-3.5px); }
.tree-node-param     .tree-node-inner::before { transform: translateZ(-6px);   }
.tree-node-param     .tree-node-inner::after  { transform: translateZ(-3px);   }
.tree-node-generator .tree-node-inner::before { transform: translateZ(-5px);   }
.tree-node-generator .tree-node-inner::after  { transform: translateZ(-2.5px); }

/* In-path: pre-hint nodes the camera will visit this cycle */
.tree-node.in-path .tree-node-inner {
  border-color: #C7D2FE;
}

.tree-node-root.in-path .tree-node-inner {
  border-color: #0A0A0A;
}

/* Focused: camera arrived at this node */
.tree-node:not(.tree-node-root).focused .tree-node-inner {
  transform: scale(1.04) translateZ(10px);
  border-color: #2563EB;
  box-shadow:
    0 0 0 2px #2563EB,
    0 1px 2px rgba(10, 10, 10, 0.05),
    0 8px 24px rgba(10, 10, 10, 0.08);
  z-index: 5;
}

.tree-node-root.focused .tree-node-inner {
  transform: scale(1.04) translateZ(10px);
  box-shadow:
    0 0 0 2px #2563EB,
    0 4px 12px rgba(10, 10, 10, 0.20),
    0 16px 36px rgba(10, 10, 10, 0.18);
}

.tree-node:not(.tree-node-root).focused .tree-node-text {
  max-width: 260px;
  opacity: 1;
  margin-left: 0;
}

/* When a node is focused, lift it above its siblings so the expanded
   label overlaps cleanly instead of needing to hide neighbours. */
.tree-node.focused {
  z-index: 50;
}

/* ============================================================
   Architecture topology — flat (non-iso) version of the hero
   tree. Same card / edge / pulse vocabulary, no 3D camera, no
   chain selection. Used inline on the Architecture page to
   replace the ASCII layered view.
   ============================================================ */

.arch-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 1.5rem auto;
}

.arch-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.arch-edge {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arch-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #D9D9D2;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0A0A0A;
  white-space: nowrap;
  z-index: 2;
}

.arch-node-root {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FAFAF7;
  padding: 11px 16px;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.10),
    0 8px 24px rgba(10, 10, 10, 0.12);
}

.arch-node-spine {
  background: #F8FAFC;
  border-color: #2563EB;
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, 0.12),
    0 4px 12px rgba(10, 10, 10, 0.08);
}

.arch-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: inherit;
}

.arch-node-icon svg { width: 100%; height: 100%; display: block; }

.arch-node-root .arch-node-icon { width: 20px; height: 20px; }

.arch-node-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.18;
}

.arch-node-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}

.arch-node-root .arch-node-name { font-size: 13.5px; }

.arch-node-sub {
  font-size: 10.5px;
  color: #6B6B68;
  font-weight: 400;
  margin-top: 1px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.arch-node-root .arch-node-sub { color: #9BA1AB; }
.arch-node-spine .arch-node-sub { color: #1E40AF; }

@media (max-width: 760px) {
  .arch-node {
    font-size: 10.5px;
    padding: 6px 9px;
  }
  .arch-node-sub { font-size: 9px; }
  .arch-node-icon { width: 14px; height: 14px; }
}