/**
 * YAKMESH Documentation - Shared Styles & Theme System
 * 
 * The Himalayan Journey Documentation Theme
 * Each module represents a waypoint on the trek to post-quantum enlightenment.
 */

/* ============================================
   BASE STYLES
   ============================================ */

:root {
  /* Mountain Base Colors */
  --mountain-100: #f1f5f9;
  --mountain-200: #e2e8f0;
  --mountain-300: #88b4a6;
  --mountain-400: #6a9a8a;
  --mountain-700: #2e4c43;
  --mountain-800: #1f332d;
  --mountain-900: #101a16;
  
  /* Default Yakmesh Green */
  --yakmesh-400: #10b981;
  --yakmesh-500: #059669;
  --yakmesh-600: #047857;
  --yakmesh-700: #065f46;
  --yakmesh-900: #022c22;
  
  /* Sidebar */
  --sidebar-width: 16rem;
}

/* Background on html so body::after silhouettes render above it */
html {
  background-color: var(--mountain-900);
}

/* ============================================
   SKIP-LINK — keyboard / screen reader a11y
   Hidden until focused, then overlays top-left.
   ============================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--theme-accent, #60a5fa);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: transparent;
  color: #fff;
  min-height: 100vh;
  position: relative;
  z-index: 0; /* Create stacking context so body::after (-1) renders above html bg */
}

/* Override utility class on body to keep it transparent */
body.bg-mountain-900 {
  background: transparent;
}

/* ============================================
   THEMED SILHOUETTE BACKGROUNDS
   Grand atmospheric scenes filling the viewport
   ============================================ */

/* Base silhouette styling - aligned to content area (not behind sidebar) */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}

/* Collapsed sidebar: narrow inset */
body.sidebar-narrow::after {
  left: var(--sidebar-collapsed-width);
}

/* Getting Started - Base Camp with tents */
[data-theme="getting-started"] body::after {
  background-image: url('assets/silhouettes/base-camp.svg');
}

/* NAMCHE Gateway - Stone arch */
[data-theme="namche"] body::after {
  background-image: url('assets/silhouettes/gateway.svg');
}

/* DOKO Identity - Woven basket */
[data-theme="doko"] body::after {
  background-image: url('assets/silhouettes/doko-basket.svg');
}

/* SHERPA Discovery - Mountain guide */
[data-theme="sherpa"] body::after {
  background-image: url('assets/silhouettes/sherpa.svg');
}

/* NAKPAK Routing - Layered backpack */
[data-theme="nakpak"] body::after {
  background-image: url('assets/silhouettes/nakpak.svg');
}

/* ANNEX P2P - Rope bridge */
[data-theme="annex"] body::after {
  background-image: url('assets/silhouettes/bridge.svg');
}

/* JHILKE - Cricket in Himalayan night meadow */
[data-theme="jhilke"] body::after {
  background-image: url('assets/silhouettes/jhilke-cricket.svg');
}

/* YAK Protocol - The yak */
[data-theme="yak-protocol"] body::after {
  background-image: url('assets/silhouettes/yak.svg');
}

/* Geographic Proof - Globe with satellites */
[data-theme="geo-proof"] body::after {
  background-image: url('assets/silhouettes/globe-satellite.svg');
}

/* Trust & Security - Fortress */
[data-theme="trust-security"] body::after {
  background-image: url('assets/silhouettes/fortress.svg');
}

/* Advanced Systems - Peak with lightning */
[data-theme="advanced-systems"] body::after {
  background-image: url('assets/silhouettes/peak-lightning.svg');
}

/* CLI Commands - Terminal */
[data-theme="cli"] body::after {
  background-image: url('assets/silhouettes/terminal.svg');
}

/* Time Sources - Atomic clock */
[data-theme="time-sources"] body::after {
  background-image: url('assets/silhouettes/atomic-clock.svg');
}

/* TATTVA System - All-seeing truth */
[data-theme="tattva"] body::after {
  background-image: url('assets/silhouettes/tattva-eye.svg');
}

/* Mesh Network - Interconnected nodes */
[data-theme="mesh"] body::after {
  background-image: url('assets/silhouettes/mesh-nodes.svg');
}

/* Configuration - Gears */
[data-theme="configuration"] body::after {
  background-image: url('assets/silhouettes/gears.svg');
}

/* Adapters - Puzzle pieces */
[data-theme="adapters"] body::after {
  background-image: url('assets/silhouettes/adapters.svg');
}

/* Web Server - Globe and server */
[data-theme="webserver"] body::after {
  background-image: url('assets/silhouettes/webserver.svg');
}

/* API Reference - Endpoints */
[data-theme="api"] body::after {
  background-image: url('assets/silhouettes/api-endpoints.svg');
}

/* MANTRA Protocol - Prayer wheel spreading messages */
[data-theme="mantra"] body::after {
  background-image: url('assets/silhouettes/mantra-wheel.svg');
}

/* STUPA Broadcast - Sacred tower broadcasting signals */
[data-theme="stupa"] body::after {
  background-image: url('assets/silhouettes/stupa-tower.svg');
}

/* Index/Overview - Base camp (default) */
[data-theme="index"] body::after {
  background-image: url('assets/silhouettes/base-camp.svg');
}

/* TRIBHUJ - Three peaks (balanced ternary) */
[data-theme="tribhuj"] body::after {
  background-image: url('assets/silhouettes/three-peaks.svg');
}

/* YPC-27 - Prayer bead mala (27 trits) */
[data-theme="ypc27"] body::after {
  background-image: url('assets/silhouettes/mala-beads.svg');
}

/* SAKSHI - All-seeing witness eye */
[data-theme="sakshi"] body::after {
  background-image: url('assets/silhouettes/witness-eye.svg');
}

/* GUMBA - Monastery with role hierarchy gates */
[data-theme="gumba"] body::after {
  background-image: url('assets/silhouettes/gumba-monastery.svg');
}

/* YURT - Nomadic tents representing room discovery */
[data-theme="yurt"] body::after {
  background-image: url('assets/silhouettes/yurt-tents.svg');
}

/* KATHA - Storytelling scene with chat elements */
[data-theme="katha"] body::after {
  background-image: url('assets/silhouettes/katha-storytelling.svg');
}

/* VANI - Voice/video calls with conch shell */
[data-theme="vani"] body::after {
  background-image: url('assets/silhouettes/vani-voice.svg');
}

/* DARSHAN - Viewing eye (view-not-copy paradigm) */
[data-theme="darshan"] body::after {
  background-image: url('assets/silhouettes/darshan-eye.svg');
}

/* TIVRA - Lightning bolt, swift hardware acceleration */
[data-theme="tivra"] body::after {
  background-image: url('assets/silhouettes/tivra-lightning.svg');
}

/* PRAHARI - Sentinel at the pass, quantum entropy watchman */
[data-theme="prahari"] body::after {
  background-image: url('assets/silhouettes/prahari-sentinel.svg');
}

/* DHARMA - Balance scales, righteous content moderation */
[data-theme="dharma"] body::after {
  background-image: url('assets/silhouettes/dharma-scales.svg');
}

/* SEVA - Offering hands, selfless compute sharing */
[data-theme="seva"] body::after {
  background-image: url('assets/silhouettes/seva-hands.svg');
}

/* YakApp - P2P chat messenger with yak mascot and chat bubbles */
[data-theme="yakapp"] body::after {
  background-image: url('assets/silhouettes/yakapp-chat.svg');
}

/* C2C - Core to Cosmos, space strategy with rocket and planet */
[data-theme="c2c"] body::after {
  background-image: url('assets/silhouettes/c2c-cosmos.svg');
}

/* Studio - Creative modes with film reels and manga panels */
[data-theme="studio"] body::after {
  background-image: url('assets/silhouettes/studio.svg');
}

/* THANGKA - Visual storytelling scroll with chat modes */
[data-theme="thangka"] body::after {
  background-image: url('assets/silhouettes/thangka-scroll.svg');
}

/* Tutorials - Open book with numbered learning steps */
[data-theme="tutorials"] body::after {
  background-image: url('assets/silhouettes/tutorials-book.svg');
}

/* Quick Reference - Clipboard with checklist */
[data-theme="reference"] body::after {
  background-image: url('assets/silhouettes/reference-clipboard.svg');
}

code, pre {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

pre[class*="language-"] {
  border-radius: 0.5rem;
}

/* ============================================
   MODULE THEME COLORS
   ============================================ */

/* Getting Started - Warm amber sunrise, beginning of journey */
[data-theme="getting-started"] {
  --theme-primary: #f59e0b;
  --theme-secondary: #d97706;
  --theme-accent: #fbbf24;
  --theme-bg: #451a03;
  --theme-glow: rgba(245, 158, 11, 0.1);
}

/* NAMCHE Gateway - Gold/amber, ancient stone arches */
[data-theme="namche"] {
  --theme-primary: #eab308;
  --theme-secondary: #ca8a04;
  --theme-accent: #fde047;
  --theme-bg: #422006;
  --theme-glow: rgba(234, 179, 8, 0.1);
}

/* DOKO Identity - Earth brown/tan, woven basket patterns */
[data-theme="doko"] {
  --theme-primary: #a16207;
  --theme-secondary: #854d0e;
  --theme-accent: #fbbf24;
  --theme-bg: #1c1917;
  --theme-glow: rgba(161, 98, 7, 0.1);
}

/* SHERPA Discovery - Ice blue/cyan, mountain guide */
[data-theme="sherpa"] {
  --theme-primary: #06b6d4;
  --theme-secondary: #0891b2;
  --theme-accent: #22d3ee;
  --theme-bg: #083344;
  --theme-glow: rgba(6, 182, 212, 0.1);
}

/* NAKPAK Routing - Deep purple/indigo, layered mystery */
[data-theme="nakpak"] {
  --theme-primary: #8b5cf6;
  --theme-secondary: #7c3aed;
  --theme-accent: #a78bfa;
  --theme-bg: #1e1b4b;
  --theme-glow: rgba(139, 92, 246, 0.1);
}

/* ANNEX P2P - Bridge blue, connection across chasms */
[data-theme="annex"] {
  --theme-primary: #3b82f6;
  --theme-secondary: #2563eb;
  --theme-accent: #60a5fa;
  --theme-bg: #172554;
  --theme-glow: rgba(59, 130, 246, 0.1);
}

/* JHILKE - Cricket green, night meadow steganography */
[data-theme="jhilke"] {
  --theme-primary: #22c55e;
  --theme-secondary: #16a34a;
  --theme-accent: #4ade80;
  --theme-bg: #052e16;
  --theme-glow: rgba(34, 197, 94, 0.1);
}

/* YAK Protocol - Warm brown, the yak itself */
[data-theme="yak-protocol"] {
  --theme-primary: #b45309;
  --theme-secondary: #92400e;
  --theme-accent: #f59e0b;
  --theme-bg: #1c1917;
  --theme-glow: rgba(180, 83, 9, 0.1);
}

/* Geographic Proof - Earth green, satellite/physics */
[data-theme="geo-proof"] {
  --theme-primary: #10b981;
  --theme-secondary: #059669;
  --theme-accent: #34d399;
  --theme-bg: #022c22;
  --theme-glow: rgba(16, 185, 129, 0.1);
}

/* Trust & Security - Forest green/stone, fortress walls */
[data-theme="trust-security"] {
  --theme-primary: #047857;
  --theme-secondary: #065f46;
  --theme-accent: #10b981;
  --theme-bg: #022c22;
  --theme-glow: rgba(4, 120, 87, 0.1);
}

/* Advanced Systems - Electric cyan/purple, peak tech */
[data-theme="advanced-systems"] {
  --theme-primary: #06b6d4;
  --theme-secondary: #8b5cf6;
  --theme-accent: #22d3ee;
  --theme-bg: #0f172a;
  --theme-glow: rgba(6, 182, 212, 0.15);
}

/* API Reference - Neutral slate, clean technical */
[data-theme="api"] {
  --theme-primary: #64748b;
  --theme-secondary: #475569;
  --theme-accent: #94a3b8;
  --theme-bg: #0f172a;
  --theme-glow: rgba(100, 116, 139, 0.1);
}

/* Adapters - Connector orange, puzzle pieces */
[data-theme="adapters"] {
  --theme-primary: #f97316;
  --theme-secondary: #ea580c;
  --theme-accent: #fb923c;
  --theme-bg: #431407;
  --theme-glow: rgba(249, 115, 22, 0.1);
}

/* Web Server - Web blue */
[data-theme="webserver"] {
  --theme-primary: #0ea5e9;
  --theme-secondary: #0284c7;
  --theme-accent: #38bdf8;
  --theme-bg: #0c4a6e;
  --theme-glow: rgba(14, 165, 233, 0.1);
}

/* CLI - Terminal green, command line */
[data-theme="cli"] {
  --theme-primary: #22c55e;
  --theme-secondary: #16a34a;
  --theme-accent: #4ade80;
  --theme-bg: #052e16;
  --theme-glow: rgba(34, 197, 94, 0.1);
}

/* Time Sources - Precision gold, atomic clocks */
[data-theme="time-sources"] {
  --theme-primary: #fbbf24;
  --theme-secondary: #d97706;
  --theme-accent: #fcd34d;
  --theme-bg: #451a03;
  --theme-glow: rgba(251, 191, 36, 0.1);
}

/* TATTVA - Deep violet, self-verifying truth */
[data-theme="tattva"] {
  --theme-primary: #a855f7;
  --theme-secondary: #9333ea;
  --theme-accent: #c084fc;
  --theme-bg: #2e1065;
  --theme-glow: rgba(168, 85, 247, 0.1);
}

/* Mesh - Network cyan, interconnected web */
[data-theme="mesh"] {
  --theme-primary: #14b8a6;
  --theme-secondary: #0d9488;
  --theme-accent: #2dd4bf;
  --theme-bg: #042f2e;
  --theme-glow: rgba(20, 184, 166, 0.1);
}

/* Configuration - Settings gray, config files */
[data-theme="configuration"] {
  --theme-primary: #a1a1aa;
  --theme-secondary: #71717a;
  --theme-accent: #d4d4d8;
  --theme-bg: #18181b;
  --theme-glow: rgba(161, 161, 170, 0.1);
}

/* MANTRA - Saffron/gold, prayer wheels and sacred messages */
[data-theme="mantra"] {
  --theme-primary: #f97316;
  --theme-secondary: #ea580c;
  --theme-accent: #fdba74;
  --theme-bg: #431407;
  --theme-glow: rgba(249, 115, 22, 0.15);
}

/* STUPA - Golden amber, sacred broadcasting towers */
[data-theme="stupa"] {
  --theme-primary: #fbbf24;
  --theme-secondary: #f59e0b;
  --theme-accent: #fde68a;
  --theme-bg: #451a03;
  --theme-glow: rgba(251, 191, 36, 0.15);
}

/* LAMA - Deep purple/violet, wise teachers in contemplation */
[data-theme="lama"] {
  --theme-primary: #a855f7;
  --theme-secondary: #9333ea;
  --theme-accent: #c084fc;
  --theme-bg: #2e1065;
  --theme-glow: rgba(168, 85, 247, 0.15);
}

[data-theme="lama"] body::after {
  background-image: url('assets/silhouettes/lama-council.svg');
}

/* MANI - Gold/precision, sacred time-keeping stones */
[data-theme="mani"] {
  --theme-primary: #eab308;
  --theme-secondary: #ca8a04;
  --theme-accent: #facc15;
  --theme-bg: #422006;
  --theme-glow: rgba(234, 179, 8, 0.15);
}

[data-theme="mani"] body::after {
  background-image: url('assets/silhouettes/mani-stones.svg');
}

/* KARMA - Red/purple, cause and effect wheel */
[data-theme="karma"] {
  --theme-primary: #e11d48;
  --theme-secondary: #be123c;
  --theme-accent: #fb7185;
  --theme-bg: #4c0519;
  --theme-glow: rgba(225, 29, 72, 0.15);
}

[data-theme="karma"] body::after {
  background-image: url('assets/silhouettes/karma-wheel.svg');
}

/* MANDALA - Teal/cyan, sacred geometric network patterns */
[data-theme="mandala"] {
  --theme-primary: #14b8a6;
  --theme-secondary: #0d9488;
  --theme-accent: #2dd4bf;
  --theme-bg: #042f2e;
  --theme-glow: rgba(20, 184, 166, 0.15);
}

[data-theme="mandala"] body::after {
  background-image: url('assets/silhouettes/mandala-network.svg');
}

/* DOCS BUNDLE - Package amber/gold, bundled shipment */
[data-theme="docs-bundle"] {
  --theme-primary: #f59e0b;
  --theme-secondary: #d97706;
  --theme-accent: #fbbf24;
  --theme-bg: #451a03;
  --theme-glow: rgba(245, 158, 11, 0.15);
}

[data-theme="docs-bundle"] body::after {
  background-image: url('assets/silhouettes/docs-bundle.svg');
}

/* TIVRA - Cyan lightning, swift hardware acceleration */
[data-theme="tivra"] {
  --theme-primary: #06b6d4;
  --theme-secondary: #0891b2;
  --theme-accent: #22d3ee;
  --theme-bg: #083344;
  --theme-glow: rgba(34, 211, 238, 0.15);
}

/* PRAHARI - Purple sentinel, quantum entropy watchman */
[data-theme="prahari"] {
  --theme-primary: #7c3aed;
  --theme-secondary: #6d28d9;
  --theme-accent: #a78bfa;
  --theme-bg: #1e1b4b;
  --theme-glow: rgba(167, 139, 250, 0.15);
}

/* DHARMA - Amber scales, righteous content moderation */
[data-theme="dharma"] {
  --theme-primary: #d97706;
  --theme-secondary: #b45309;
  --theme-accent: #fbbf24;
  --theme-bg: #451a03;
  --theme-glow: rgba(251, 191, 36, 0.15);
}

/* SEVA - Emerald hands, selfless compute sharing */
[data-theme="seva"] {
  --theme-primary: #059669;
  --theme-secondary: #047857;
  --theme-accent: #34d399;
  --theme-bg: #022c22;
  --theme-glow: rgba(52, 211, 153, 0.15);
}

/* Documentation Index - Yakmesh green */
[data-theme="index"] {
  --theme-primary: #10b981;
  --theme-secondary: #059669;
  --theme-accent: #34d399;
  --theme-bg: #022c22;
  --theme-glow: rgba(16, 185, 129, 0.1);
}

/* YakApp - Cyan/teal, P2P chat messenger */
[data-theme="yakapp"] {
  --theme-primary: #0891b2;
  --theme-secondary: #0e7490;
  --theme-accent: #22d3ee;
  --theme-bg: #0c1a22;
  --theme-glow: rgba(34, 211, 238, 0.1);
}

/* C2C - Warm orange, space strategy game */
[data-theme="c2c"] {
  --theme-primary: #ea580c;
  --theme-secondary: #c2410c;
  --theme-accent: #fb923c;
  --theme-bg: #1a0f08;
  --theme-glow: rgba(251, 146, 60, 0.1);
}

/* Studio - Pink/magenta, creative modes */
[data-theme="studio"] {
  --theme-primary: #db2777;
  --theme-secondary: #be185d;
  --theme-accent: #f472b6;
  --theme-bg: #1a1028;
  --theme-glow: rgba(244, 114, 182, 0.1);
}

/* THANGKA - Purple/violet, visual storytelling scroll */
[data-theme="thangka"] {
  --theme-primary: #8b5cf6;
  --theme-secondary: #7c3aed;
  --theme-accent: #a78bfa;
  --theme-bg: #1e1b4b;
  --theme-glow: rgba(167, 139, 250, 0.15);
}

/* Tutorials - Green, learning & guidance */
[data-theme="tutorials"] {
  --theme-primary: #10b981;
  --theme-secondary: #059669;
  --theme-accent: #34d399;
  --theme-bg: #022c22;
  --theme-glow: rgba(16, 185, 129, 0.1);
}

/* Quick Reference - Amber, checklist & lookup */
[data-theme="reference"] {
  --theme-primary: #f59e0b;
  --theme-secondary: #d97706;
  --theme-accent: #fbbf24;
  --theme-bg: #451a03;
  --theme-glow: rgba(245, 158, 11, 0.1);
}

/* GUMBA - Incense gold/warm amber, monastery hierarchy */
[data-theme="gumba"] {
  --theme-primary: #d97706;
  --theme-secondary: #b45309;
  --theme-accent: #fbbf24;
  --theme-bg: #451a03;
  --theme-glow: rgba(251, 191, 36, 0.15);
}

/* YURT - Campfire orange/red, nomadic discovery */
[data-theme="yurt"] {
  --theme-primary: #ea580c;
  --theme-secondary: #c2410c;
  --theme-accent: #fb923c;
  --theme-bg: #431407;
  --theme-glow: rgba(251, 146, 60, 0.15);
}

/* KATHA - Parchment gold, storytelling chat */
[data-theme="katha"] {
  --theme-primary: #eab308;
  --theme-secondary: #ca8a04;
  --theme-accent: #facc15;
  --theme-bg: #422006;
  --theme-glow: rgba(250, 204, 21, 0.15);
}

/* VANI - Conch pink/coral, voice & video calls */
[data-theme="vani"] {
  --theme-primary: #ec4899;
  --theme-secondary: #db2777;
  --theme-accent: #f472b6;
  --theme-bg: #500724;
  --theme-glow: rgba(244, 114, 182, 0.15);
}

/* DARSHAN - Lens violet, view-not-copy paradigm */
[data-theme="darshan"] {
  --theme-primary: #a78bfa;
  --theme-secondary: #8b5cf6;
  --theme-accent: #c4b5fd;
  --theme-bg: #1e1b4b;
  --theme-glow: rgba(196, 181, 253, 0.15);
}

/* TRIBHUJ - Ternary teal, three-peak balanced */
[data-theme="tribhuj"] {
  --theme-primary: #14b8a6;
  --theme-secondary: #0d9488;
  --theme-accent: #2dd4bf;
  --theme-bg: #042f2e;
  --theme-glow: rgba(45, 212, 191, 0.15);
}

/* YPC-27 - Matrix green, prayer bead mala encoding */
[data-theme="ypc27"] {
  --theme-primary: #22c55e;
  --theme-secondary: #16a34a;
  --theme-accent: #4ade80;
  --theme-bg: #052e16;
  --theme-glow: rgba(74, 222, 128, 0.15);
}

/* SAKSHI - Witness silver/ice, all-seeing observer */
[data-theme="sakshi"] {
  --theme-primary: #94a3b8;
  --theme-secondary: #64748b;
  --theme-accent: #cbd5e1;
  --theme-bg: #0f172a;
  --theme-glow: rgba(203, 213, 225, 0.15);
}

/* ============================================
   SIDEBAR STYLES
   ============================================ */

.docs-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100%;
  background: var(--mountain-800);
  border-right: 1px solid var(--mountain-700);
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  transition: width 0.3s ease, transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--glacier-500) transparent;
}

.docs-sidebar::-webkit-scrollbar {
  width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--glacier-600);
  border-radius: 4px;
}

.docs-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--glacier-500);
}

/* Dashboard Link - quick access from docs */
.sidebar-dashboard-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, var(--yakmesh-600), var(--yakmesh-700));
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.15s, transform 0.15s;
  border: 1px solid var(--yakmesh-500);
}

.sidebar-dashboard-link:hover {
  background: linear-gradient(135deg, var(--yakmesh-500), var(--yakmesh-600));
  transform: translateY(-1px);
}

.docs-sidebar.icon-only .sidebar-dashboard-link span:last-child {
  display: none;
}

/* Sidebar Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.25rem;
}

.sidebar-logo .logo-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sidebar-logo .logo-text {
  transition: opacity 0.2s ease, width 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

/* Sidebar Navigation */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-nav li {
  list-style: none;
}

.sidebar-nav li.sidebar-section {
  padding: 0.75rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--mountain-500);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--mountain-700);
  margin-top: 0.5rem;
  pointer-events: none;
  user-select: none;
}

.sidebar-nav li.sidebar-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.sidebar-nav li.sidebar-section span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.docs-sidebar.icon-only .sidebar-nav li.sidebar-section {
  padding: 0.5rem 0;
  text-align: center;
  font-size: 0;
}

.docs-sidebar.icon-only .sidebar-nav li.sidebar-section span {
  font-size: 0;
  justify-content: center;
  border-top: 1px solid var(--mountain-700);
  padding-top: 0.5rem;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--mountain-300);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav a:hover {
  background: var(--mountain-700);
  color: #fff;
}

.sidebar-nav a.active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.docs-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.docs-sidebar-logo img {
  height: 4rem;
  width: 4rem;
}

.docs-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.docs-sidebar h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--mountain-400);
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.docs-sidebar ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.docs-sidebar a {
  display: block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--mountain-300);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.docs-sidebar a:hover {
  background: var(--mountain-700);
  color: #fff;
}

.docs-sidebar a.active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

/* ============================================
   SIDEBAR TOGGLE - Icon-only collapse
   ============================================ */

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 4rem;
  left: calc(var(--sidebar-width) - 1rem);
  z-index: 110;
  background: var(--mountain-700);
  border: 1px solid var(--mountain-600);
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  color: var(--mountain-300);
  cursor: pointer;
  transition: left 0.3s ease, background-color 0.15s;
}

.sidebar-toggle:hover {
  background: var(--mountain-600);
  color: #fff;
}

.sidebar-toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease;
}

/* ============================================
   ICON-ONLY COLLAPSED MODE
   ============================================ */

:root {
  --sidebar-collapsed-width: 5rem;
}

/* Collapsed sidebar state */
.docs-sidebar.icon-only {
  width: var(--sidebar-collapsed-width);
  padding: 1rem 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.docs-sidebar.icon-only .sidebar-logo {
  justify-content: center;
}

.docs-sidebar.icon-only .sidebar-logo .logo-text {
  display: none;
}

.docs-sidebar.icon-only .sidebar-logo .logo-icon {
  font-size: 1.75rem;
}

.docs-sidebar.icon-only .sidebar-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.5rem;
}

/* Hide text in nav links when collapsed */
.docs-sidebar.icon-only .sidebar-nav a span:last-child {
  display: none;
}

/* Emoji icons in collapsed mode */
.docs-sidebar.icon-only .sidebar-nav a span:first-child {
  font-size: 1.5rem;
}

/* First span (emoji) styling - normal mode */
.sidebar-nav a span:first-child {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Toggle button moves with sidebar */
.docs-sidebar.icon-only ~ .sidebar-toggle,
.sidebar-toggle.collapsed {
  left: calc(var(--sidebar-collapsed-width) - 1rem);
}

.sidebar-toggle.collapsed svg {
  transform: rotate(180deg);
}

/* Main content adjusts */
.docs-main {
  transition: margin-left 0.3s ease;
}

.docs-main.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.docs-main {
  margin-left: var(--sidebar-width);
  padding: 2rem 3rem;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.docs-content {
  max-width: 56rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.docs-content h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.docs-content .subtitle {
  font-size: 1.1rem;
  color: var(--mountain-300);
  margin-bottom: 2rem;
}

.docs-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--theme-accent, #6ee7b7);
}

.docs-content h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--theme-primary, #10b981);
}

.docs-content p {
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--mountain-200);
}

.docs-content pre {
  background: var(--mountain-800);
  border: 1px solid var(--mountain-700);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.docs-content code {
  font-size: 0.875rem;
  color: var(--theme-accent, #6ee7b7);
}

.docs-content pre code {
  color: var(--mountain-200);
}

/* ============================================
   FOOTER
   ============================================ */

.docs-footer {
  margin-left: var(--sidebar-width);
  padding: 2rem 3rem;
  text-align: center;
  color: var(--mountain-400);
  border-top: 1px solid var(--mountain-700);
  transition: margin-left 0.3s ease;
}

.docs-footer p {
  margin: 0;
  font-size: 0.875rem;
}

/* Footer adjusts with collapsed sidebar */
.sidebar-collapsed ~ .docs-footer,
body:has(.docs-sidebar.icon-only) .docs-footer {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================
   RESPONSIVE / MOBILE
   ============================================ */

/* Narrow screens - hide sidebar, show hamburger menu */
@media (max-width: 900px) {
  /* Silhouette spans full viewport when sidebar is hidden */
  body::after {
    left: 0;
  }

  .docs-sidebar {
    display: none !important;
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    padding: 1.5rem;
    z-index: 90;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .docs-sidebar.open {
    display: block !important;
    transform: translateX(0);
  }
  
  /* Reset icon-only mode on mobile */
  .docs-sidebar.open.icon-only {
    width: 280px;
    max-width: 85vw;
    padding: 1.5rem;
  }
  
  .docs-sidebar.open.icon-only .sidebar-logo .logo-text,
  .docs-sidebar.open.icon-only .sidebar-nav a span:last-child {
    display: inline !important;
  }
  
  .docs-sidebar.open.icon-only .sidebar-nav a {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
  }
  
  .sidebar-toggle {
    display: flex !important;
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 100;
    background: var(--mountain-700);
    border: 1px solid var(--mountain-600);
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .sidebar-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 80;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .sidebar-overlay.open {
    display: block;
    opacity: 1;
  }
  
  .docs-main {
    margin-left: 0 !important;
    padding: 1rem;
    padding-top: 4rem;
  }
  
  .docs-footer {
    margin-left: 0 !important;
  }
  
  /* Cards single column on mobile */
  .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  .flex {
    flex-wrap: wrap;
  }
  
  pre {
    padding: 0.75rem !important;
    font-size: 0.8rem;
    overflow-x: auto;
  }
  
  /* Prevent body scroll when sidebar is open */
  body.sidebar-mobile-open {
    overflow: hidden;
  }
}

/* ============================================
   THEME-AWARE ELEMENTS
   ============================================ */

.theme-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--theme-glow, rgba(16, 185, 129, 0.2));
  color: var(--theme-primary, #10b981);
}

.theme-heading {
  color: var(--theme-primary, #10b981);
}

.theme-link {
  color: var(--theme-primary, #10b981);
  text-decoration: none;
}

.theme-link:hover {
  color: var(--theme-accent, #34d399);
}

.theme-card {
  background: var(--mountain-800);
  border: 1px solid var(--theme-primary, var(--mountain-700));
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color 0.15s;
}

.theme-card:hover {
  border-color: var(--theme-accent, var(--mountain-400));
}

.theme-callout {
  background: var(--theme-glow, rgba(16, 185, 129, 0.1));
  border: 1px solid var(--theme-primary, var(--mountain-700));
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* ============================================
   STUPA PRIORITY TIERS
   ============================================ */

.priority-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.tier {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--mountain-800);
  border-left: 4px solid;
}

.tier-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 140px;
}

.tie
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
}

.tier h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.tier p {
  margin: 0;
  color: var(--mountain-300);
  font-size: 0.875rem;
}

.tier-critical {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.tier-critical .tier-level {
  background: #ef4444;
  color: #fff;
}

.tier-critical h4 {
  color: #f87171;
}

.tier-flash {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.tier-flash .tier-level {
  background: #f97316;
  color: #fff;
}

.tier-flash h4 {
  color: #fb923c;
}

.tier-immediate {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}

.tier-immediate .tier-level {
  background: #fbbf24;
  color: #1a2a22;
}

.tier-immediate h4 {
  color: #fcd34d;
}

.tier-priority {
  border-left-color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.tier-priority .tier-level {
  background: #34d399;
  color: #1a2a22;
}

.tier-priority h4 {
  color: #6ee7b7;
}

.tier-routine {
  border-left-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

.tier-routine .tier-level {
  background: #60a5fa;
  color: #1a2a22;
}

.tier-routine h4 {
  color: #93c5fd;
}

/* Flow Diagram */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.flow-step {
  text-align: center;
  padding: 1rem;
  background: var(--mountain-800);
  border-radius: 0.75rem;
  border: 1px solid var(--mountain-700);
  min-width: 120px;
}

.flow-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.flow-label {
  font-weight: 600;
  color: var(--theme-primary, #fbbf24);
  margin-bottom: 0.25rem;
}

.flow-step p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--mountain-400);
}

.flow-arrow {
  color: var(--mountain-500);
  font-size: 1.5rem;
}

/* Security List */
.security-list {
  list-style: none;
  padding: 0;
}

.security-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mountain-700);
  color: var(--mountain-200);
}

.security-list li:last-child {
  border-bottom: none;
}

/* Integration Grid */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.integration-card {
  background: var(--mountain-800);
  border: 1px solid var(--mountain-700);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.integration-card h4 {
  margin: 0 0 0.5rem 0;
  color: var(--theme-primary, #10b981);
}

.integration-card p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mountain-300);
}

/* API Table */
.api-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.api-table th,
.api-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--mountain-700);
}

.api-table th {
  background: var(--mountain-800);
  color: var(--mountain-200);
  font-weight: 600;
}

.api-table td {
  color: var(--mountain-300);
}

.api-table code {
  background: var(--mountain-900);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

/* ============================================
   LAMA DHARMIC STATES
   ============================================ */

.dharmic-states {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.state {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--mountain-800);
  border-left: 4px solid;
}

.state-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 140px;
}

.state-icon {
  font-size: 1.25rem;
}

.state h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.state p {
  margin: 0;
  color: var(--mountain-300);
  font-size: 0.875rem;
}

.state-pending {
  border-left-color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
}

.state-pending h4 {
  color: #9ca3af;
}

.state-validated {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

.state-validated h4 {
  color: #c084fc;
}

.state-consensus {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.state-consensus h4 {
  color: #34d399;
}

.state-rejected {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.state-rejected h4 {
  color: #f87171;
}

.state-conflict {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.state-conflict h4 {
  color: #fbbf24;
}

/* Conflict Flow */
.conflict-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.conflict-step {
  text-align: center;
  padding: 1rem;
  background: var(--mountain-800);
  border-radius: 0.75rem;
  border: 1px solid var(--mountain-700);
  min-width: 140px;
  max-width: 180px;
}

.conflict-step h4 {
  margin: 0 0 0.5rem 0;
  color: var(--theme-primary, #a855f7);
}

.conflict-step p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--mountain-400);
}

.conflict-arrow {
  color: var(--mountain-500);
  font-size: 1.5rem;
}

/* ============================================
   MANI TRUST LEVELS
   ============================================ */

.trust-levels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.trust-level {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--mountain-800);
  border-left: 4px solid;
}

.level-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 180px;
}

.level-icon {
  font-size: 1.25rem;
}

.trust-level h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex: 1;
}

.level-tolerance {
  font-size: 0.75rem;
  font-family: monospace;
  padding: 0.125rem 0.375rem;
  background: var(--mountain-900);
  border-radius: 0.25rem;
}

.trust-level p {
  margin: 0;
  color: var(--mountain-300);
  font-size: 0.875rem;
  flex: 1;
}

.level-quantum {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

.level-quantum h4 {
  color: #c084fc;
}

.level-quantum .level-tolerance {
  color: #c084fc;
}

.level-atomic {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.1);
}

.level-atomic h4 {
  color: #facc15;
}

.level-atomic .level-tolerance {
  color: #facc15;
}

.level-gps {
  border-left-color: #84cc16;
  background: rgba(132, 204, 22, 0.1);
}

.level-gps h4 {
  color: #a3e635;
}

.level-gps .level-tolerance {
  color: #a3e635;
}

.level-ptp {
  border-left-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
}

.level-ptp h4 {
  color: #38bdf8;
}

.level-ptp .level-tolerance {
  color: #38bdf8;
}

.level-ntp {
  border-left-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

.level-ntp h4 {
  color: #93c5fd;
}

.level-ntp .level-tolerance {
  color: #93c5fd;
}

.level-unsync {
  border-left-color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
}

.level-unsync h4 {
  color: #9ca3af;
}

.level-unsync .level-tolerance {
  color: #9ca3af;
}

/* ============================================
   KARMA LEVELS
   ============================================ */

.karma-levels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.karma-level {
  background: var(--mountain-800);
  border-radius: 0.75rem;
  border-left: 4px solid;
  overflow: hidden;
}

.karma-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--mountain-900);
}

.karma-icon {
  font-size: 1.5rem;
}

.karma-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex: 1;
}

.karma-number {
  font-size: 0.75rem;
  font-family: monospace;
  padding: 0.25rem 0.5rem;
  background: var(--mountain-800);
  border-radius: 0.25rem;
}

.karma-body {
  padding: 1rem 1.25rem;
}

.karma-desc {
  margin: 0 0 0.75rem 0;
  color: var(--mountain-300);
  font-style: italic;
}

.karma-requirements {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--mountain-400);
  font-size: 0.875rem;
}

.karma-requirements li {
  margin-bottom: 0.25rem;
}

/* KARMA levels - Nepali expedition roles */
.level-sirdar {
  border-left-color: #f59e0b;
  /* Amber gold - expedition leader */
}

.level-sirdar .karma-header h4 {
  color: #fbbf24;
}

.level-sirdar .karma-number {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
}

.level-sathi {
  border-left-color: #a855f7;
  /* Purple - trusted companion */
}

.level-sathi .karma-header h4 {
  color: #c084fc;
}

.level-sathi .karma-number {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.2);
}

.level-pathik {
  border-left-color: #eab308;
  /* Yellow - traveler */
}

.level-pathik .karma-header h4 {
  color: #facc15;
}

.level-pathik .karma-number {
  color: #eab308;
  background: rgba(234, 179, 8, 0.2);
}

.level-yatri {
  border-left-color: #6b7280;
  /* Gray - pilgrim */
}

.level-yatri .karma-header h4 {
  color: #9ca3af;
}

.level-yatri .karma-number {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.2);
}

.level-naya {
  border-left-color: #22c55e;
  /* Green - newcomer */
}

.level-naya .karma-header h4 {
  color: #4ade80;
}

.level-naya .karma-number {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
}

/* Legacy level names (keep for backwards compatibility) */
.level-enlightened {
  border-left-color: #E5E4E2;
}

.level-enlightened .karma-header h4 {
  color: #f5f5f4;
}

.level-enlightened .karma-number {
  color: #E5E4E2;
}

.level-awakened {
  border-left-color: #FFD700;
}

.level-awakened .karma-header h4 {
  color: #fde047;
}

.level-awakened .karma-number {
  color: #FFD700;
}

.level-seeking {
  border-left-color: #CD7F32;
}

.level-seeking .karma-header h4 {
  color: #d97706;
}

.level-seeking .karma-number {
  color: #CD7F32;
}

.level-untrusted {
  border-left-color: #ef4444;
}

.level-untrusted .karma-header h4 {
  color: #f87171;
}

.level-untrusted .karma-number {
  color: #ef4444;
}

/* ============================================
   MANDALA MESSAGE TYPES
   ============================================ */

.message-types {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.message-type {
  background: var(--mountain-800);
  border-radius: 0.5rem;
  border-left: 4px solid var(--mountain-600);
  overflow: hidden;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--mountain-750);
}

.message-icon {
  font-size: 1.25rem;
}

.message-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.message-body {
  padding: 0.75rem 1rem;
}

.message-body p {
  margin: 0 0 0.5rem 0;
  color: var(--mountain-300);
  font-size: 0.875rem;
}

.message-body code {
  font-size: 0.75rem;
  color: #2dd4bf;
}

.type-hello {
  border-left-color: #10b981;
}

.type-hello .message-header h4 {
  color: #6ee7b7;
}

.type-welcome {
  border-left-color: #14b8a6;
}

.type-welcome .message-header h4 {
  color: #5eead4;
}

.type-gossip {
  border-left-color: #f59e0b;
}

.type-gossip .message-header h4 {
  color: #fcd34d;
}

.type-sync {
  border-left-color: #3b82f6;
}

.type-sync .message-header h4 {
  color: #93c5fd;
}

.type-ping {
  border-left-color: #8b5cf6;
}

.type-ping .message-header h4 {
  color: #c4b5fd;
}

.type-bye {
  border-left-color: #ef4444;
}

.type-bye .message-header h4 {
  color: #fca5a5;
}

/* ============================================
   MANDALA CONNECTION LIFECYCLE
   ============================================ */

.lifecycle-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--mountain-800);
  border-radius: 0.5rem;
}

.lifecycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--mountain-750);
  border-radius: 0.5rem;
  border: 1px solid var(--mountain-600);
  min-width: 100px;
}

.step-num {
  font-size: 0.75rem;
  font-weight: bold;
  color: #14b8a6;
  font-family: monospace;
}

.step-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #5eead4;
}

.step-desc {
  font-size: 0.7rem;
  color: var(--mountain-400);
  text-align: center;
}

.lifecycle-arrow {
  color: var(--mountain-500);
  font-size: 1.25rem;
  font-weight: bold;
}

/* ============================================
   MANDALA CONNECTION STATES
   ============================================ */

.connection-states {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.conn-state {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--mountain-800);
  border-radius: 0.5rem;
  border-left: 3px solid var(--mountain-600);
}

.state-icon {
  font-size: 1.25rem;
}

.state-name {
  font-size: 0.875rem;
  font-weight: 600;
  font-family: monospace;
  min-width: 120px;
}

.state-desc {
  font-size: 0.875rem;
  color: var(--mountain-400);
}

.state-connecting {
  border-left-color: #f59e0b;
}

.state-connecting .state-name {
  color: #fcd34d;
}

.state-handshaking {
  border-left-color: #3b82f6;
}

.state-handshaking .state-name {
  color: #93c5fd;
}

.state-active {
  border-left-color: #10b981;
}

.state-active .state-name {
  color: #6ee7b7;
}

.state-draining {
  border-left-color: #8b5cf6;
}

.state-draining .state-name {
  color: #c4b5fd;
}

.state-closed {
  border-left-color: #ef4444;
}

.state-closed .state-name {
  color: #fca5a5;
}

/* ============================================
   TOPOLOGY DIAGRAM
   ============================================ */

.topology-diagram {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--mountain-800);
  border-radius: 0.5rem;
  overflow-x: auto;
}

.ascii-art {
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5eead4;
  margin: 0;
  white-space: pre;
}

/* ============================================
   INTEGRATION TABLE
   ============================================ */

.integration-table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

.integration-table th,
.integration-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--mountain-700);
}

.integration-table th {
  background: var(--mountain-800);
  color: #5eead4;
  font-weight: 600;
}

.integration-table td:first-child {
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-mountain-300 {
  color: var(--mountain-300);
}

.text-mountain-400 {
  color: var(--mountain-400);
}

.bg-mountain-800 {
  background-color: var(--mountain-800);
}

.bg-mountain-900 {
  background-color: var(--mountain-900);
}

.border-mountain-700 {
  border-color: var(--mountain-700);
}

/* ============================================
   ADDITIONAL RESPONSIVE FIXES
   ============================================ */

/* Cryptographic chains and horizontal flows should wrap */
@media (max-width: 800px) {

  /* Make horizontal flex chains wrap */
  .bg-mountain-800 .flex.items-center.gap-2,
  .flex.items-center.gap-2:has(span.bg-mountain-700) {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Hide arrows on wrap */
  .flex.items-center.gap-2>span:not(.bg-mountain-700):not([class]) {
    display: none;
  }

  /* Journey navigation cards stack vertically */
  .flex.flex-col.sm\\:flex-row {
    flex-direction: column !important;
  }

  /* Reduce main content padding */
  .docs-main {
    padding: 1rem 0.75rem;
  }

  .docs-content {
    padding: 0;
  }

  /* Tables become scrollable */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Reduce heading sizes */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .docs-main {
    padding: 0.75rem 0.5rem;
    padding-top: 3.5rem;
  }

  /* Stack items that have flex-1 */
  .flex>.flex-1 {
    min-width: 100%;
  }

  /* Reduce badge and tag sizes */
  .theme-badge,
  span.bg-mountain-700 {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  /* Make code blocks scrollable */
  pre {
    max-width: 100%;
    overflow-x: auto;
  }

  pre code {
    font-size: 0.75rem;
  }
}

/* ============================================
   TOUCH TARGETS — WCAG 2.5.5 minimum 44px
   Only applied on coarse pointer (touch) devices.
   ============================================ */

@media (pointer: coarse) {
  .sidebar-nav a {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
  }

  .docs-nav-footer a,
  .border-t a.flex-1 {
    min-height: 44px;
  }

  button,
  [role="button"],
  .sidebar-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   YAK ICON - Yakmesh logo (local SVG)
   ============================================ */

.yak-icon {
  display: inline-block;
  width: 1.3em;
  height: 1.5em;
  vertical-align: -0.4em;
  margin-right: 0.03em;
  background-image: url("yak-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.docs-sidebar.icon-only .sidebar-nav .yak-icon {
  width: 1.5em;
  height: 1.5em;
}

/* ============================================
   DOC-ICON — Inline SVG icon system
   Replaces emoji with theme-colorable SVG icons.
   Uses <svg class="doc-icon"><use href="..."/></svg>
   ============================================ */

.doc-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Sidebar context: slightly larger, theme-tinted */
.sidebar-nav .doc-icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.2em;
  margin-right: 0.15em;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}

.sidebar-nav a:hover .doc-icon,
.sidebar-nav a.active .doc-icon {
  opacity: 1;
  color: var(--theme-accent, #60a5fa);
}

/* Icon-only collapsed sidebar */
.docs-sidebar.icon-only .sidebar-nav .doc-icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0;
}

/* Page header hero icon (large) */
.hero-icon {
  width: 3rem;
  height: 3rem;
  color: var(--theme-accent, #60a5fa);
  filter: drop-shadow(0 0 8px var(--theme-glow, rgba(96, 165, 250, 0.3)));
}

/* Journey nav card icon */
.journey-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Inline body-text icon (Related Documentation, cross-references) */
.inline-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  opacity: 0.85;
  color: var(--theme-accent, #60a5fa);
}

/* Module card header icon (replaces text-2xl emoji) */
.card-icon {
  width: 2rem;
  height: 2rem;
  color: var(--theme-accent, #60a5fa);
  filter: drop-shadow(0 0 4px var(--theme-glow, rgba(96, 165, 250, 0.2)));
}

/* ============================================
   PARTICLE ANIMATION SYSTEM
   Unique themed floating particles per module.
   Spawned dynamically by docs.js initParticles().
   ============================================ */

/* --- Base Particle --- */
.ym-particle {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Inner glow dot */
.ym-particle .ym-dot {
  display: block;
  border-radius: 50%;
  width: var(--p-size, 6px);
  height: var(--p-size, 6px);
  background: var(--p-color, var(--theme-accent, #4ade80));
  box-shadow: 0 0 8px 3px var(--p-color, var(--theme-accent)),
    0 0 20px 6px var(--p-glow, rgba(74, 222, 128, 0.3)),
    0 0 40px 12px var(--p-glow-far, rgba(74, 222, 128, 0.08));
  animation: ym-pulse var(--p-pulse, 3s) ease-in-out infinite;
}

/* Soft halo around dot */
.ym-particle .ym-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--p-size, 6px) * 6);
  height: calc(var(--p-size, 6px) * 6);
  border-radius: 50%;
  background: radial-gradient(circle, var(--p-glow, rgba(74, 222, 128, 0.08)) 0%, transparent 70%);
  animation: ym-pulse var(--p-pulse, 3s) ease-in-out infinite;
  pointer-events: none;
}

/* --- Shape Variants --- */

/* Snowflake: 6-ray rotated star */
.ym-particle.ym-snowflake .ym-dot {
  border-radius: 0;
  background: transparent;
  width: var(--p-size, 8px);
  height: var(--p-size, 8px);
  box-shadow: none;
  position: relative;
}

.ym-particle.ym-snowflake .ym-dot::before,
.ym-particle.ym-snowflake .ym-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 2px;
  background: var(--p-color, #22d3ee);
  box-shadow: 0 0 6px var(--p-color, #22d3ee);
  transform-origin: center;
}

.ym-particle.ym-snowflake .ym-dot::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.ym-particle.ym-snowflake .ym-dot::after {
  transform: translate(-50%, -50%) rotate(60deg);
}

.ym-particle.ym-snowflake .ym-dot {
  animation: ym-spin 12s linear infinite, ym-pulse var(--p-pulse, 4s) ease-in-out infinite;
}

/* Ring: expanding circle */
.ym-particle.ym-ring .ym-dot {
  background: transparent;
  border: 1.5px solid var(--p-color, #a78bfa);
  box-shadow: 0 0 6px var(--p-color, #a78bfa), inset 0 0 4px var(--p-glow, rgba(167, 139, 250, 0.3));
  animation: ym-ring-expand var(--p-pulse, 4s) ease-out infinite;
}

/* Ember: flickering warm dot */
.ym-particle.ym-ember .ym-dot {
  animation: ym-ember-flicker var(--p-pulse, 2s) ease-in-out infinite;
}

/* Smoke: fading translucent blob */
.ym-particle.ym-smoke .ym-dot {
  background: var(--p-color, rgba(200, 200, 200, 0.5));
  box-shadow: 0 0 12px 4px var(--p-glow, rgba(200, 200, 200, 0.2));
  filter: blur(4px);
  animation: ym-smoke-fade var(--p-pulse, 6s) ease-in-out infinite;
}

.ym-particle.ym-smoke .ym-halo {
  display: none;
}

/* Leaf: asymmetric sway */
.ym-particle.ym-leaf .ym-dot {
  border-radius: 50% 0 50% 0;
  animation: ym-leaf-tumble var(--p-pulse, 5s) ease-in-out infinite,
    ym-pulse var(--p-pulse, 5s) ease-in-out infinite;
}

/* Spark: bright flash dot */
.ym-particle.ym-spark .ym-dot {
  animation: ym-spark-flash var(--p-pulse, 1.5s) ease-in-out infinite;
}

/* Hex: hexagonal glow */
.ym-particle.ym-hex .ym-dot {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: ym-hex-glow var(--p-pulse, 3s) ease-in-out infinite;
}

/* Triangle: rotating prism */
.ym-particle.ym-triangle .ym-dot {
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: ym-spin 10s linear infinite, ym-pulse var(--p-pulse, 3s) ease-in-out infinite;
}

/* --- Animation Keyframes --- */

@keyframes ym-pulse {

  0%,
  100% {
    opacity: var(--p-max, 0.9);
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: var(--p-max, 0.9);
  }
}

@keyframes ym-ring-expand {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes ym-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes ym-ember-flicker {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  20% {
    opacity: 1;
    transform: scale(1.3);
  }

  40% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  60% {
    opacity: 0.9;
    transform: scale(1.1);
  }

  80% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}

@keyframes ym-smoke-fade {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(0);
  }

  20% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.35;
    transform: scale(1.5) translateY(-30px);
  }

  80% {
    opacity: 0.15;
    transform: scale(2.0) translateY(-60px);
  }

  100% {
    opacity: 0;
    transform: scale(2.4) translateY(-90px);
  }
}

@keyframes ym-leaf-tumble {

  0%,
  100% {
    transform: rotate(0deg) scaleX(1);
  }

  25% {
    transform: rotate(15deg) scaleX(0.8);
  }

  50% {
    transform: rotate(-10deg) scaleX(1);
  }

  75% {
    transform: rotate(20deg) scaleX(0.7);
  }
}

@keyframes ym-spark-flash {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }

  10% {
    opacity: 1;
    transform: scale(1.5);
  }

  30% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes ym-hex-glow {

  0%,
  100% {
    opacity: 0.6;
    box-shadow: 0 0 4px var(--p-color);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 16px var(--p-color), 0 0 30px var(--p-glow);
  }
}

/* --- Drift Paths (gentle wandering) --- */
@keyframes ym-drift-1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(30px, -60px);
  }

  50% {
    transform: translate(-20px, -100px);
  }

  75% {
    transform: translate(50px, -40px);
  }
}

@keyframes ym-drift-2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-40px, -80px);
  }

  50% {
    transform: translate(20px, -120px);
  }

  75% {
    transform: translate(-30px, -50px);
  }
}

@keyframes ym-drift-3 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(50px, -40px);
  }

  50% {
    transform: translate(-10px, -90px);
  }

  75% {
    transform: translate(40px, -70px);
  }
}

@keyframes ym-drift-4 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-20px, -110px);
  }

  50% {
    transform: translate(35px, -60px);
  }

  75% {
    transform: translate(-45px, -90px);
  }
}

@keyframes ym-drift-5 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(60px, -30px);
  }

  50% {
    transform: translate(-25px, -80px);
  }

  75% {
    transform: translate(15px, -55px);
  }
}

@keyframes ym-drift-6 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-35px, -70px);
  }

  50% {
    transform: translate(45px, -110px);
  }

  75% {
    transform: translate(-10px, -45px);
  }
}

@keyframes ym-drift-7 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(25px, -95px);
  }

  50% {
    transform: translate(-40px, -50px);
  }

  75% {
    transform: translate(55px, -75px);
  }
}

@keyframes ym-drift-8 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-50px, -45px);
  }

  50% {
    transform: translate(30px, -85px);
  }

  75% {
    transform: translate(-15px, -65px);
  }
}

/* --- Directional Paths --- */
@keyframes ym-fall-1 {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: var(--p-max, 0.8);
  }

  90% {
    opacity: var(--p-max, 0.8);
  }

  100% {
    transform: translateY(110vh) translateX(30px);
    opacity: 0;
  }
}

@keyframes ym-fall-2 {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: var(--p-max, 0.7);
  }

  90% {
    opacity: var(--p-max, 0.7);
  }

  100% {
    transform: translateY(110vh) translateX(-20px);
    opacity: 0;
  }
}

@keyframes ym-fall-3 {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: var(--p-max, 0.6);
  }

  90% {
    opacity: var(--p-max, 0.6);
  }

  100% {
    transform: translateY(110vh) translateX(15px);
    opacity: 0;
  }
}

@keyframes ym-rise-1 {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }

  15% {
    opacity: var(--p-max, 0.7);
  }

  85% {
    opacity: var(--p-max, 0.7);
  }

  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}

@keyframes ym-rise-2 {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }

  15% {
    opacity: var(--p-max, 0.6);
  }

  85% {
    opacity: var(--p-max, 0.6);
  }

  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}

@keyframes ym-rise-3 {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }

  15% {
    opacity: var(--p-max, 0.5);
  }

  85% {
    opacity: var(--p-max, 0.5);
  }

  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}

/* --- Orbit Path --- */
@keyframes ym-orbit {
  0% {
    transform: rotate(0deg) translateX(60px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(60px) rotate(-360deg);
  }
}

/* --- Themed Dividers --- */
.themed-divider {
  height: 2px;
  margin: 2rem 0;
  border: none;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--theme-accent, #4ade80) 20%,
      var(--theme-primary, #22c55e) 50%,
      var(--theme-accent, #4ade80) 80%,
      transparent 100%);
  opacity: 0.4;
  box-shadow: 0 0 8px var(--theme-glow, rgba(34, 197, 94, 0.1));
}

/* --- Accessibility: respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .ym-particle {
    display: none !important;
  }

  .themed-divider {
    animation: none !important;
  }
}

/* --- Mobile: fewer, smaller particles --- */
@media (max-width: 768px) {
  .ym-particle:nth-child(n+7) {
    display: none;
  }

  .ym-particle .ym-dot {
    transform: scale(0.7);
  }

  .ym-particle .ym-halo {
    display: none;
  }
}