/**
 * ============================================================================
 * TURQUOISEPAPERS CSS v11.0.0 — Linear Docs Clone Edition
 * ============================================================================
 * 
 * Ecosystem: AK7 (Amplifik AI Inc)
 * Products: WikiOS, Forensik, Micelios, Turquoisepapers, ÉKOO, VÚNKRS
 * Target: Obsidian Publish v1.x (2024-2025)
 * Author: J (JJDO)
 * Date: 2025-12-04
 * 
 * Design System:
 * - 100% Linear App (linear.app/docs) — Exact grays, layout, spacing
 * - Accent: #00CED1 (Perplexity turquoise) — ONLY accent color
 * 
 * CHANGES v11:
 * - Exact Linear grays for dark AND light mode
 * - Column layout matching Linear (sidebar 240px, TOC 200px, content 760px)
 * - Unified gray palette across themes
 * 
 * ============================================================================
 */

/* ============================================================================
   SECTION 1: FONT IMPORTS
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;550;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   SECTION 2: CSS VARIABLES — ROOT (Dark Mode Default)
   ============================================================================ */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     FONTS (Linear exact)
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-text: "Inter", "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
  --font-interface: var(--font-text);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY SCALE (Linear exact)
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.8125rem;    /* 13px */
  --font-size-base: 0.9375rem;  /* 15px - Linear base */
  --font-size-md: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  
  /* ═══════════════════════════════════════════════════════════════════════════
     FONT WEIGHTS (Linear uses 400, 500, 600, 700)
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     LINE HEIGHTS (Linear exact)
     ═══════════════════════════════════════════════════════════════════════════ */
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     LETTER SPACING (Linear exact)
     ═══════════════════════════════════════════════════════════════════════════ */
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: -0.011em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     COLORS: DARK MODE (Linear exact - content lighter, sidebars darker)
     ═══════════════════════════════════════════════════════════════════════════ */
  --bg-base: #050506;                /* Almost pure black */
  --bg-primary: #050506;             /* Main content area - almost black */
  --bg-sidebar: #111113;             /* Sidebars - darker gray like Linear */
  --bg-secondary: #050506;           /* Pure black for content areas */
  --bg-tertiary: #1E1E21;            /* Cards, code blocks */
  --bg-elevated: #232326;            /* Hover states */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);
  --bg-input: #18181B;
  
  /* Override Obsidian's background variables */
  --background-secondary: #050506;
  --background-primary: #050506;
  --background-primary-alt: #050506;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TEXT COLORS: DARK MODE (Linear exact - pure white headings, lighter body)
     ═══════════════════════════════════════════════════════════════════════════ */
  --text-primary: #FFFFFF;           /* Pure white for headings */
  --text-secondary: #d0d6e0;         /* Linear exact - lighter body text */
  --text-tertiary: #8a8f98;          /* Linear tertiary */
  --text-muted: #62666d;             /* Linear quaternary */
  --text-faint: #3F3F46;             /* zinc-700 */
  --text-inverted: #050506;
  
  /* Sidebar specific */
  --sidebar-text: #71717A;           /* zinc-500 */
  --sidebar-text-hover: #A1A1AA;     /* zinc-400 */
  --sidebar-heading: #52525B;        /* zinc-600 - "ON THIS PAGE" */
  
  /* Footer - ultra subtle */
  --footer-text: #27272A;            /* zinc-800 - almost invisible */
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TURQUOISE ACCENT (Perplexity — THE ONLY accent color)
     ═══════════════════════════════════════════════════════════════════════════ */
  --accent-primary: #00CED1;         /* Dark Turquoise */
  --accent-hover: #20B2AA;           /* Light Sea Green */
  --accent-dark: #008B8B;            /* Dark Cyan */
  --accent-light: #40E0D0;           /* Turquoise */
  --accent-muted: rgba(0, 206, 209, 0.12);
  --accent-subtle: rgba(0, 206, 209, 0.06);
  --accent-border: rgba(0, 206, 209, 0.25);
  --accent-glow: rgba(0, 206, 209, 0.35);
  
  /* === Obsidian color-base overrides for PURE BLACK === */
  --color-base-00: #050506;
  --color-base-05: #050506;
  --color-base-10: #050506;
  --color-base-20: #050506;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS (Linear derived - ultra subtle for clean look)
     ═══════════════════════════════════════════════════════════════════════════ */
  --border-subtle: rgba(255, 255, 255, 0.03);
  --border-default: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.06);
  --border-focus: var(--accent-primary);
  
  /* Scrollbar specific - very subtle */
  --scrollbar-thumb: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.10);
  --scrollbar-track: transparent;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --success: #10B981;
  --success-muted: rgba(16, 185, 129, 0.12);
  --success-border: rgba(16, 185, 129, 0.25);
  --warning: #F59E0B;
  --warning-muted: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.25);
  --error: #EF4444;
  --error-muted: rgba(239, 68, 68, 0.12);
  --error-border: rgba(239, 68, 68, 0.25);
  --info: #3B82F6;
  --info-muted: rgba(59, 130, 246, 0.12);
  --info-border: rgba(59, 130, 246, 0.25);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SPIRAL DYNAMICS COLORS (8 levels of consciousness)
     ═══════════════════════════════════════════════════════════════════════════ */
  --spiral-beige: #D4A574;
  --spiral-purple: #8B5CF6;
  --spiral-red: #DC2626;
  --spiral-blue: #2563EB;
  --spiral-orange: #EA580C;
  --spiral-green: #16A34A;
  --spiral-yellow: #CA8A04;
  --spiral-turquoise: #0D9488;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     FORENSIK COLORS (cryptographic verification)
     ═══════════════════════════════════════════════════════════════════════════ */
  --forensik-verified: #059669;
  --forensik-verified-bg: rgba(5, 150, 105, 0.08);
  --forensik-verified-border: rgba(5, 150, 105, 0.25);
  --forensik-pending: #D97706;
  --forensik-pending-bg: rgba(217, 119, 6, 0.08);
  --forensik-pending-border: rgba(217, 119, 6, 0.25);
  --forensik-failed: #DC2626;
  --forensik-failed-bg: rgba(220, 38, 38, 0.08);
  --forensik-failed-border: rgba(220, 38, 38, 0.25);
  --forensik-hash: #0EA5E9;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     AK7-DDC CLASSIFICATION COLORS (0-9)
     ═══════════════════════════════════════════════════════════════════════════ */
  --class-0: #737373;   /* Meta */
  --class-1: #3B82F6;   /* Fundamentals */
  --class-2: #8B5CF6;   /* Concepts */
  --class-3: #22C55E;   /* Guides */
  --class-4: #F59E0B;   /* Tools */
  --class-5: #06B6D4;   /* Reference */
  --class-6: #EC4899;   /* Cases */
  --class-7: #F97316;   /* Community */
  --class-8: #64748B;   /* Templates */
  --class-9: #78716C;   /* Archives */
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING SCALE (Tailwind 4px grid)
     ═══════════════════════════════════════════════════════════════════════════ */
  --space-0: 0;
  --space-0-5: 0.125rem;    /* 2px */
  --space-1: 0.25rem;       /* 4px */
  --space-1-5: 0.375rem;    /* 6px */
  --space-2: 0.5rem;        /* 8px */
  --space-2-5: 0.625rem;    /* 10px */
  --space-3: 0.75rem;       /* 12px */
  --space-3-5: 0.875rem;    /* 14px */
  --space-4: 1rem;          /* 16px */
  --space-5: 1.25rem;       /* 20px */
  --space-6: 1.5rem;        /* 24px */
  --space-7: 1.75rem;       /* 28px */
  --space-8: 2rem;          /* 32px */
  --space-9: 2.25rem;       /* 36px */
  --space-10: 2.5rem;       /* 40px */
  --space-12: 3rem;         /* 48px */
  --space-14: 3.5rem;       /* 56px */
  --space-16: 4rem;         /* 64px */
  --space-20: 5rem;         /* 80px */
  --space-24: 6rem;         /* 96px */
  
  /* ═══════════════════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════════════════ */
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-full: 9999px;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SHADOWS (Linear style - subtle, diffuse)
     ═══════════════════════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 20px var(--accent-glow);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     TRANSITIONS (Linear 100-150ms)
     ═══════════════════════════════════════════════════════════════════════════ */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-moderate: 200ms;
  --duration-slow: 300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ═══════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════════════════ */
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  
  /* ═══════════════════════════════════════════════════════════════════════════
     LAYOUT — LINEAR DOCS EXACT PROPORTIONS
     ═══════════════════════════════════════════════════════════════════════════ */
  --sidebar-width: 240px;
  --toc-width: 200px;
  --content-max-width: 760px;
  --content-padding: 48px;
  --nav-height: 0px;
}

/* ============================================================================
   SECTION 3: LIGHT MODE OVERRIDES (Linear exact from screenshots)
   ============================================================================ */

.theme-light,
:root.theme-light,
.theme-light .markdown-preview-view,
.theme-light .markdown-rendered {
  /* === BACKGROUNDS (Linear light mode - white content, gray sidebars) === */
  --bg-base: #FFFFFF;
  --bg-primary: #FFFFFF;
  --bg-sidebar: #FAFAFA;             /* Sidebars - very subtle gray like Linear */
  --bg-secondary: #FFFFFF;           /* Pure white - NO GRAY for content areas */
  --bg-tertiary: #F4F4F5;            /* Cards, code blocks - zinc-100 */
  --bg-elevated: #FFFFFF;
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-active: rgba(0, 0, 0, 0.05);
  --bg-input: #FFFFFF;
  
  /* Override Obsidian's background-secondary to pure white */
  --background-secondary: #FFFFFF;
  --background-primary: #FFFFFF;
  --background-primary-alt: #FFFFFF;
  
  /* === TEXT (Linear light mode - pure black headings, lighter sidebar text) === */
  --text-primary: #000000;           /* Pure black for headings */
  --text-secondary: #3F3F46;         /* zinc-700 - body text */
  --text-tertiary: #52525B;          /* zinc-600 */
  --text-muted: #A1A1AA;             /* zinc-400 - sidebar text */
  --text-faint: #D4D4D8;             /* zinc-300 - very light */
  --text-inverted: #FFFFFF;
  
  /* Sidebar specific text colors - lighter for clean look */
  --sidebar-text: #71717A;           /* zinc-500 */
  --sidebar-text-hover: #52525B;     /* zinc-600 */
  --sidebar-heading: #A1A1AA;        /* zinc-400 - "ON THIS PAGE" */
  
  /* Footer - ultra subtle */
  --footer-text: #E4E4E7;            /* zinc-200 - almost invisible */
  
  /* === TURQUOISE ACCENT (darker for light mode contrast) === */
  --accent-primary: #0891B2;         /* cyan-600 */
  --accent-hover: #0E7490;           /* cyan-700 */
  --accent-dark: #155E75;            /* cyan-800 */
  --accent-light: #22D3EE;           /* cyan-400 */
  --accent-muted: rgba(8, 145, 178, 0.08);
  --accent-subtle: rgba(8, 145, 178, 0.04);
  --accent-border: rgba(8, 145, 178, 0.20);
  --accent-glow: rgba(8, 145, 178, 0.25);
  
  /* === BORDERS (Linear light mode - ULTRA subtle, barely visible) === */
  --border-subtle: rgba(0, 0, 0, 0.015);
  --border-default: rgba(0, 0, 0, 0.02);
  --border-strong: rgba(0, 0, 0, 0.03);
  
  /* Scrollbar specific - very subtle */
  --scrollbar-thumb: rgba(0, 0, 0, 0.06);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.10);
  --scrollbar-track: transparent;
  
  /* === SHADOWS (lighter) === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);
  
  /* === Obsidian color-base overrides for PURE WHITE === */
  --color-base-00: #FFFFFF;
  --color-base-05: #FFFFFF;
  --color-base-10: #FFFFFF;
  --color-base-20: #FFFFFF;
}

/* ============================================================================
   SECTION 4: PUBLISH LAYOUT — LINEAR DOCS CLONE
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   NUCLEAR BACKGROUND OVERRIDE — Eliminate ALL gray backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* Light mode: PURE WHITE everywhere in content area */
.theme-light .render-container,
.theme-light .render-container-inner,
.theme-light .sliding-windows .render-container,
.theme-light .site-body-center-column,
.theme-light .site-body-center-column > *,
.theme-light .published-container,
.theme-light .publish-renderer,
.theme-light .markdown-preview-view,
.theme-light .markdown-rendered,
.theme-light .publish-article-view {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Dark mode: PURE BLACK everywhere in content area */
.theme-dark .render-container,
.theme-dark .render-container-inner,
.theme-dark .sliding-windows .render-container,
.theme-dark .site-body-center-column,
.theme-dark .site-body-center-column > *,
.theme-dark .published-container,
.theme-dark .publish-renderer,
.theme-dark .markdown-preview-view,
.theme-dark .markdown-rendered,
.theme-dark .publish-article-view {
  background: #050506 !important;
  background-color: #050506 !important;
}

/* Main container */
.published-container,
.publish-renderer {
  background-color: var(--bg-primary) !important;
}

/* Site body - flexbox for three-column layout */
.site-body {
  display: flex;
  flex-direction: row;
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

/* Left sidebar - Linear exact */
.site-body-left-column {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-sidebar) !important;
  border-right: 0.5px solid var(--border-subtle);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Light mode: ultra subtle dividers - barely visible (50% thinner + 50% more transparent) */
.theme-light .site-body-left-column {
  border-right: 0.5px solid rgba(0, 0, 0, 0.02);
}

.theme-light .site-body-right-column {
  border-left: 0.5px solid rgba(0, 0, 0, 0.02);
}

.theme-light .site-header {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.02);
}

/* Dark mode: subtle dividers that blend with darker sidebar */
.theme-dark .site-body-left-column {
  border-right: 0.5px solid rgba(255, 255, 255, 0.02);
}

.theme-dark .site-body-right-column {
  border-left: 0.5px solid rgba(255, 255, 255, 0.02);
}

.theme-dark .site-header {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.02);
}

/* Center content - Linear exact */
.site-body-center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-primary) !important;
  min-width: 0;
  padding: 0;
}

/* Article/Content wrapper */
.publish-article-view,
.markdown-preview-view,
.markdown-rendered {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--content-padding);
  padding-top: var(--space-8);
}

/* Right sidebar (TOC) - Linear exact */
.site-body-right-column {
  width: var(--toc-width);
  min-width: var(--toc-width);
  max-width: var(--toc-width);
  flex-shrink: 0;
  background: var(--bg-primary) !important;
  border-left: 0.5px solid var(--border-subtle);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6) var(--space-4);
}

/* ============================================================================
   SECTION 5: LEFT SIDEBAR STYLING — LINEAR EXACT
   ============================================================================ */

.nav-view-outer {
  padding: var(--space-4);
}

/* Site header in sidebar */
.site-header {
  padding: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 0.5px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}

.site-header-text {
  font-weight: var(--font-weight-semibold);
  font-size: 0.8125rem;              /* 13px - smaller */
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-tight);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header-text:hover {
  color: var(--accent-primary) !important;  /* Turquoise on hover */
}

/* Theme specific header text */
.theme-light .site-header-text {
  color: #000000;  /* Pure black in light mode */
}

.theme-dark .site-header-text {
  color: #FFFFFF;  /* Pure white in dark mode */
}

/* Site header link hover - turquoise */
.site-header a:hover,
.site-header a:hover .site-header-text {
  color: var(--accent-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OBSIDIAN PUBLISH SITE NAME (Logo/Title)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-body-left-column-site-name {
  transition: color var(--duration-fast) var(--ease-out);
}

.site-body-left-column-site-name:hover {
  color: var(--accent-primary) !important;
}

.theme-light .site-body-left-column-site-name {
  color: #000000;
}

.theme-light .site-body-left-column-site-name:hover {
  color: var(--accent-primary) !important;
}

.theme-dark .site-body-left-column-site-name {
  color: #FFFFFF;
}

.theme-dark .site-body-left-column-site-name:hover {
  color: var(--accent-primary) !important;
}

/* Navigation items - even smaller text */
.nav-folder-title,
.nav-file-title {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.5625rem;              /* 9px - 2px smaller */
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
  margin: 1px 0;
}

.nav-folder-title:hover,
.nav-file-title:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-file-title.is-active {
  background: var(--accent-muted) !important;
  color: var(--accent-primary) !important;
}

.nav-folder-title.is-active {
  color: var(--accent-primary);
}

/* Collapse icons */
.nav-folder-collapse-indicator,
.collapse-icon {
  color: var(--text-muted);
}

/* Tree lines */
.tree-item-self {
  color: var(--text-secondary);
}

/* Search in sidebar */
.search-input-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}

.search-input {
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* ============================================================================
   SECTION 6: RIGHT SIDEBAR (TOC) STYLING — LINEAR EXACT
   ============================================================================ */

.outline-heading {
  font-size: 0.5rem;                 /* 8px - smaller */
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--sidebar-heading);     /* Uses theme-specific variable */
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--border-subtle);
}

.toc-item,
.outline-item {
  padding: var(--space-1) 0;
}

.toc-item a,
.outline-item a {
  font-size: 0.5625rem;              /* 9px - 2px smaller */
  color: var(--sidebar-text);        /* Uses theme-specific variable */
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.toc-item a:hover,
.outline-item a:hover {
  color: var(--accent-primary);
}

.toc-item.is-active a,
.outline-item.is-active a {
  color: var(--accent-primary);
  font-weight: var(--font-weight-medium);
}

/* TOC active indicator line - ultra subtle (75% less visible) */
.theme-light .toc-item.is-active,
.theme-light .outline-item.is-active {
  border-left: 1px solid rgba(8, 145, 178, 0.08);  /* Even more subtle */
  margin-left: -1px;
  padding-left: 8px;
}

.theme-dark .toc-item.is-active,
.theme-dark .outline-item.is-active {
  border-left: 2px solid rgba(0, 206, 209, 0.15);  /* 75% less visible */
  margin-left: -2px;
  padding-left: 8px;
}

/* Outline view container - the vertical line - ultra subtle */
.outline-view {
  border-left: 0.5px solid transparent;
}

.theme-light .outline-view {
  border-left-color: rgba(0, 0, 0, 0.01);  /* Nearly invisible */
}

.theme-dark .outline-view {
  border-left-color: rgba(255, 255, 255, 0.01);  /* Nearly invisible */
}

/* Tree indentation lines - ultra subtle */
.tree-item-children {
  border-left: none;
}

.theme-light .tree-item-children {
  border-left-color: rgba(0, 0, 0, 0.01);
}

.theme-dark .tree-item-children {
  border-left-color: rgba(255, 255, 255, 0.01);
}

/* ============================================================================
   SECTION 6B: LIGHT MODE SIDEBAR OVERRIDES — Cleaner, lighter text
   ============================================================================ */

.theme-light .site-body-left-column,
.theme-light .site-body-right-column {
  background: #FAFAFA !important;    /* Subtle gray sidebar */
}

.theme-light .nav-folder-title,
.theme-light .nav-file-title {
  color: #71717A;  /* zinc-500 - lighter */
}

.theme-light .nav-folder-title:hover,
.theme-light .nav-file-title:hover {
  color: #52525B;  /* zinc-600 on hover */
}

.theme-light .toc-item a,
.theme-light .outline-item a {
  color: #71717A;  /* zinc-500 - lighter */
}

.theme-light .toc-item a:hover,
.theme-light .outline-item a:hover {
  color: var(--accent-primary);
}

.theme-light .outline-heading {
  color: #D4D4D8;  /* zinc-300 - "ON THIS PAGE" much more gray */
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.02);  /* Ultra subtle */
}

.theme-light .collapse-icon,
.theme-light .nav-folder-collapse-indicator {
  color: #D4D4D8;  /* zinc-300 - super light */
}

/* Footer ultra subtle in light mode */
.theme-light .publish-footer {
  color: #E4E4E7;  /* zinc-200 - nearly invisible */
  opacity: 0.5;
}

/* Light mode center column - pure white (not grayish) */
.theme-light .site-body-center-column {
  background: #FFFFFF !important;
}

.theme-light .publish-article-view,
.theme-light .markdown-preview-view,
.theme-light .markdown-rendered {
  background: #FFFFFF !important;
}

/* Override render-container gray background in light mode */
.theme-light .render-container,
.theme-light .render-container-inner,
.theme-light .site-body-center-column > * {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: none !important;
}

/* The space between content and TOC - pure white */
.theme-light .sliding-windows .render-container {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: none !important;
}

/* ============================================================================
   SECTION 6C: DARK MODE SIDEBAR OVERRIDES — Distinct sidebar background
   ============================================================================ */

.theme-dark .site-body-left-column,
.theme-dark .site-body-right-column {
  background: #111113 !important;    /* Darker gray sidebar - distinct from content */
}

.theme-dark .site-body-center-column {
  background: #050506 !important;    /* Even darker - almost pure black */
}

.theme-dark .publish-article-view,
.theme-dark .markdown-preview-view,
.theme-dark .markdown-rendered {
  background: #050506 !important;
}

/* Override render-container gray background in dark mode */
.theme-dark .render-container,
.theme-dark .render-container-inner,
.theme-dark .site-body-center-column > * {
  background: #050506 !important;
  background-color: #050506 !important;
}

/* The space between content and TOC - pure black */
.theme-dark .sliding-windows .render-container {
  background: #050506 !important;
  background-color: #050506 !important;
}

.theme-dark .nav-folder-title,
.theme-dark .nav-file-title {
  color: #71717A;  /* zinc-500 */
}

.theme-dark .nav-folder-title:hover,
.theme-dark .nav-file-title:hover {
  color: #A1A1AA;  /* zinc-400 on hover */
}

.theme-dark .toc-item a,
.theme-dark .outline-item a {
  color: #71717A;  /* zinc-500 */
}

.theme-dark .toc-item a:hover,
.theme-dark .outline-item a:hover {
  color: var(--accent-primary);
}

.theme-dark .outline-heading {
  color: #3F3F46;  /* zinc-700 - "ON THIS PAGE" much more subtle */
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.02);  /* Ultra subtle - match sidebars */
}

.theme-dark .collapse-icon,
.theme-dark .nav-folder-collapse-indicator {
  color: #3F3F46;  /* zinc-700 */
}

/* Footer ultra subtle in dark mode */
.theme-dark .publish-footer {
  color: #18181B;  /* zinc-900 - nearly invisible */
  opacity: 0.5;
}

/* ============================================================================
   SECTION 7: BREADCRUMBS — LINEAR STYLE
   ============================================================================ */

.publish-article-path,
.mod-breadcrumbs,
.breadcrumbs {
  color: var(--text-muted) !important;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.publish-article-path a,
.mod-breadcrumbs a,
.breadcrumbs a {
  color: var(--text-muted) !important;
  text-decoration: none;
}

.publish-article-path a:hover,
.mod-breadcrumbs a:hover,
.breadcrumbs a:hover {
  color: var(--accent-primary) !important;
  text-decoration: underline;
}

/* Change separator from ">" to "/" */
.publish-article-path-separator {
  font-size: 0 !important;
}

.publish-article-path-separator::before {
  content: " / ";
  font-size: var(--font-size-sm);
  color: var(--text-muted) !important;
}

/* ============================================================================
   SECTION 8: NUCLEAR OBSIDIAN PURPLE OVERRIDE
   ============================================================================ */

:root,
.theme-dark,
.theme-light,
body,
.markdown-preview-view,
.markdown-rendered,
.workspace,
.workspace-leaf,
.view-content {
  --interactive-accent: var(--accent-primary) !important;
  --interactive-accent-hsl: 181, 100%, 41% !important;
  --interactive-accent-hover: var(--accent-hover) !important;
  --text-accent: var(--accent-primary) !important;
  --text-accent-hover: var(--accent-hover) !important;
  
  --checkbox-color: var(--accent-primary) !important;
  --checkbox-color-hover: var(--accent-hover) !important;
  --checkbox-border-color: var(--border-strong) !important;
  --checkbox-border-color-hover: var(--accent-primary) !important;
  
  --tag-color: var(--accent-primary) !important;
  --tag-color-hover: var(--accent-hover) !important;
  --tag-background: var(--accent-muted) !important;
  --tag-background-hover: var(--accent-subtle) !important;
  
  --link-color: var(--accent-primary) !important;
  --link-color-hover: var(--accent-hover) !important;
  --link-external-color: var(--accent-primary) !important;
  --link-external-color-hover: var(--accent-hover) !important;
  --link-unresolved-color: var(--accent-hover) !important;
  --link-unresolved-opacity: 0.7 !important;
  
  --graph-line: var(--border-default) !important;
  --graph-node: var(--text-muted) !important;
  --graph-node-focused: var(--accent-primary) !important;
  --graph-node-active: var(--accent-primary) !important;
  
  --nav-item-color-active: var(--accent-primary) !important;
  --nav-item-background-active: var(--accent-muted) !important;
}

.mod-active,
.is-active,
.nav-file-title.is-active,
.nav-folder-title.is-active {
  color: var(--accent-primary) !important;
  background-color: var(--accent-muted) !important;
}

/* ============================================================================
   SECTION 9: BASE STYLES — BODY & DOCUMENT
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body,
.markdown-preview-view,
.markdown-rendered {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   SECTION 10: HEADINGS
   ============================================================================ */

h1, h2, h3, h4, h5, h6,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-family: var(--font-text);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* H1 */
h1,
.markdown-preview-view h1,
.markdown-rendered h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--text-primary);
  margin: var(--space-10) 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  line-height: var(--line-height-tight);
}

/* First h1 - no top margin */
.markdown-preview-view > h1:first-child,
.markdown-rendered > h1:first-child {
  margin-top: 0;
}

/* H2 */
h2,
.markdown-preview-view h2,
.markdown-rendered h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  line-height: var(--line-height-snug);
}

/* H3 */
h3,
.markdown-preview-view h3,
.markdown-rendered h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-3);
  line-height: var(--line-height-snug);
}

/* H4 */
h4,
.markdown-preview-view h4,
.markdown-rendered h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: var(--space-5) 0 var(--space-2);
  line-height: var(--line-height-normal);
}

/* H5 & H6 */
h5, h6,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: normal;
  letter-spacing: var(--letter-spacing-wide);
  margin: var(--space-4) 0 var(--space-2);
  line-height: var(--line-height-normal);
}

/* ============================================================================
   SECTION 11: PARAGRAPHS & TEXT
   ============================================================================ */

p,
.markdown-preview-view p,
.markdown-rendered p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

strong, b,
.markdown-preview-view strong,
.markdown-preview-view b {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

em, i,
.markdown-preview-view em,
.markdown-preview-view i {
  font-style: italic;
}

strong em, em strong,
b i, i b {
  font-weight: var(--font-weight-semibold);
  font-style: italic;
}

del, s,
.markdown-preview-view del,
.markdown-preview-view s {
  text-decoration: line-through;
  opacity: 0.7;
}

mark,
.markdown-preview-view mark {
  background-color: var(--accent-muted);
  color: var(--text-primary);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

small {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ============================================================================
   SECTION 12: LINKS
   ============================================================================ */

a,
.markdown-preview-view a,
.markdown-rendered a,
.internal-link,
.external-link {
  color: var(--accent-primary);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

a:hover,
.markdown-preview-view a:hover,
.internal-link:hover,
.external-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.internal-link:hover,
.markdown-preview-view .internal-link:hover {
  background: var(--accent-muted);
  padding: 0 3px;
  margin: 0 -3px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* External link indicator - REMOVED for cleaner look */
a[href^="http"]:not([href*="obsidian.md"]):not(.wiki-btn):not(.wiki-card):not(.wiki-nav-link)::after,
.external-link::after {
  content: none;
  display: none;
}

/* Unresolved links */
.is-unresolved,
.internal-link.is-unresolved {
  opacity: 0.7;
  text-decoration: underline dotted;
}

/* ============================================================================
   SECTION 13: LISTS
   ============================================================================ */

ul, ol,
.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left: var(--space-6);
  margin: var(--space-4) 0;
  color: var(--text-secondary);
}

li,
.markdown-preview-view li {
  line-height: var(--line-height-relaxed);
  margin: var(--space-2) 0;
}

li > ul,
li > ol {
  margin: var(--space-2) 0;
}

/* Unordered list bullets - turquoise */
ul > li::marker {
  color: var(--accent-primary);
}

/* Ordered list numbers */
ol > li::marker {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

/* Task lists */
.task-list-item {
  list-style: none;
  margin-left: calc(-1 * var(--space-6));
  padding-left: var(--space-6);
}

input[type="checkbox"],
.task-list-item-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  margin-right: var(--space-2);
  position: relative;
  transition: all var(--duration-fast) var(--ease-out);
}

input[type="checkbox"]:checked,
.task-list-item-checkbox:checked {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

input[type="checkbox"]:checked::after,
.task-list-item-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-inverted);
  font-size: 10px;
  font-weight: bold;
}

/* ============================================================================
   SECTION 14: BLOCKQUOTES
   ============================================================================ */

blockquote,
.markdown-preview-view blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent-primary);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote blockquote {
  margin-top: var(--space-3);
  border-left-color: var(--accent-hover);
}

/* ============================================================================
   SECTION 15: CODE BLOCKS
   ============================================================================ */

/* Inline code */
code,
.markdown-preview-view code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

/* Code blocks */
pre,
.markdown-preview-view pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  padding: 0;
  background: transparent;
  border: none;
  font-size: inherit;
  color: var(--text-secondary);
}

/* Syntax highlighting - turquoise based */
.token.keyword,
.cm-keyword { color: var(--accent-primary); }
.token.string,
.cm-string { color: #10B981; }
.token.number,
.cm-number { color: #F59E0B; }
.token.comment,
.cm-comment { color: var(--text-muted); font-style: italic; }
.token.function,
.cm-def { color: #8B5CF6; }
.token.class-name,
.cm-type { color: #EC4899; }
.token.operator,
.cm-operator { color: var(--text-tertiary); }
.token.punctuation,
.cm-punctuation { color: var(--text-muted); }

/* Language label */
pre[class*="language-"]::before {
  content: attr(class);
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Copy button */
.copy-code-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

pre:hover .copy-code-button {
  opacity: 1;
}

.copy-code-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ============================================================================
   SECTION 16: TABLES
   ============================================================================ */

table,
.markdown-preview-view table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--font-size-sm);
}

thead {
  background: var(--accent-subtle);
}

th {
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--accent-border);
  color: var(--text-primary);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}

tr:hover {
  background: var(--bg-hover);
}

/* ============================================================================
   SECTION 17: IMAGES & MEDIA
   ============================================================================ */

img,
.markdown-preview-view img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

figure {
  margin: var(--space-4) 0;
}

figcaption {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Video embeds */
iframe,
video {
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

/* ============================================================================
   SECTION 18: HORIZONTAL RULES
   ============================================================================ */

hr,
.markdown-preview-view hr {
  border: none;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-8) 0;
}

/* ============================================================================
   SECTION 19: CALLOUTS (Obsidian native)
   ============================================================================ */

.callout {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.callout-icon {
  width: 18px;
  height: 18px;
}

.callout-content {
  color: var(--text-secondary);
}

.callout-content p:last-child {
  margin-bottom: 0;
}

/* Callout types */
.callout[data-callout="note"],
.callout[data-callout="info"] {
  border-left: 3px solid var(--info);
  background: var(--info-muted);
}

.callout[data-callout="tip"],
.callout[data-callout="hint"] {
  border-left: 3px solid var(--accent-primary);
  background: var(--accent-muted);
}

.callout[data-callout="warning"],
.callout[data-callout="caution"] {
  border-left: 3px solid var(--warning);
  background: var(--warning-muted);
}

.callout[data-callout="danger"],
.callout[data-callout="error"] {
  border-left: 3px solid var(--error);
  background: var(--error-muted);
}

.callout[data-callout="success"],
.callout[data-callout="check"] {
  border-left: 3px solid var(--success);
  background: var(--success-muted);
}

.callout[data-callout="quote"],
.callout[data-callout="cite"] {
  border-left: 3px solid var(--text-muted);
  background: var(--bg-tertiary);
  font-style: italic;
}

/* ============================================================================
   SECTION 20: TAGS
   ============================================================================ */

.tag,
a.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--accent-muted);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.tag:hover,
a.tag:hover {
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

/* ============================================================================
   SECTION 21: FRONTMATTER
   ============================================================================ */

.frontmatter,
.frontmatter-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ============================================================================
   SECTION 22: FOOTNOTES
   ============================================================================ */

.footnote-ref {
  font-size: var(--font-size-xs);
  vertical-align: super;
  color: var(--accent-primary);
}

.footnotes {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.footnotes ol {
  padding-left: var(--space-5);
}

.footnote-backref {
  color: var(--accent-primary);
  text-decoration: none;
}

/* ============================================================================
   SECTION 23: MATH (LaTeX/KaTeX)
   ============================================================================ */

.math,
.math-display,
.katex {
  font-size: 1.1em;
  color: var(--text-primary);
}

.math-display {
  overflow-x: auto;
  padding: var(--space-3) 0;
}

/* ============================================================================
   SECTION 24: WIKI COMPONENTS — CARDS
   ============================================================================ */

.wiki-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.wiki-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}

.wiki-card:hover {
  border-color: var(--accent-border);
  background: var(--bg-tertiary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.wiki-card-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
}

.wiki-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.wiki-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-relaxed);
}

/* ============================================================================
   SECTION 25: WIKI COMPONENTS — INFOBOX
   ============================================================================ */

.wiki-infobox {
  float: right;
  width: 280px;
  margin: 0 0 var(--space-4) var(--space-6);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.wiki-infobox-header {
  background: var(--accent-muted);
  padding: var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--border-default);
}

.wiki-infobox-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.wiki-infobox-image {
  width: 100%;
  height: auto;
}

.wiki-infobox-row {
  display: flex;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
}

.wiki-infobox-row:last-child {
  border-bottom: none;
}

.wiki-infobox-label {
  flex: 0 0 35%;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.wiki-infobox-value {
  flex: 1;
  color: var(--text-secondary);
}

/* ============================================================================
   SECTION 26: WIKI COMPONENTS — BADGES & STATUS
   ============================================================================ */

.wiki-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.wiki-badge-turquoise {
  background: var(--accent-muted);
  color: var(--accent-primary);
}

.wiki-badge-success {
  background: var(--success-muted);
  color: var(--success);
}

.wiki-badge-warning {
  background: var(--warning-muted);
  color: var(--warning);
}

.wiki-badge-error {
  background: var(--error-muted);
  color: var(--error);
}

.wiki-badge-info {
  background: var(--info-muted);
  color: var(--info);
}

.wiki-badge-neutral {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Status indicator with dot */
.wiki-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.wiki-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.wiki-status-dot.success { background: var(--success); }
.wiki-status-dot.warning { background: var(--warning); }
.wiki-status-dot.error { background: var(--error); }
.wiki-status-dot.info { background: var(--info); }

/* ============================================================================
   SECTION 27: WIKI COMPONENTS — BUTTONS
   ============================================================================ */

.wiki-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border: none;
}

.wiki-btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverted);
}

.wiki-btn-primary:hover {
  background: var(--accent-hover);
}

.wiki-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.wiki-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.wiki-btn-ghost {
  background: transparent;
  color: var(--accent-primary);
}

.wiki-btn-ghost:hover {
  background: var(--accent-muted);
}

/* ============================================================================
   SECTION 28: WIKI COMPONENTS — SITEMAP
   ============================================================================ */

.wiki-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

.wiki-sitemap-section {
  display: flex;
  flex-direction: column;
}

.wiki-sitemap-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.wiki-sitemap-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wiki-sitemap-link {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.wiki-sitemap-link:hover {
  color: var(--accent-primary);
}

/* ============================================================================
   SECTION 29: WIKI COMPONENTS — FOOTER
   ============================================================================ */

.wiki-footer {
  margin-top: var(--space-16);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-default);
}

.wiki-footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.wiki-footer-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.wiki-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.wiki-footer-link {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.wiki-footer-link:hover {
  color: var(--accent-primary);
}

.wiki-footer-copy {
  font-size: var(--font-size-xs);
  color: var(--text-faint);
}

/* ============================================================================
   SECTION 30: FORENSIK — VERIFICATION BLOCKS
   ============================================================================ */

.wiki-verified {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--forensik-verified-border);
  background: var(--forensik-verified-bg);
}

.wiki-verified-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.wiki-verified-icon {
  width: 20px;
  height: 20px;
  color: var(--forensik-verified);
}

.wiki-verified-title {
  font-weight: var(--font-weight-semibold);
  color: var(--forensik-verified);
}

.wiki-verified-content {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Pending state */
.wiki-pending {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--forensik-pending-border);
  background: var(--forensik-pending-bg);
}

.wiki-pending-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.wiki-pending-icon {
  width: 20px;
  height: 20px;
  color: var(--forensik-pending);
}

.wiki-pending-title {
  font-weight: var(--font-weight-semibold);
  color: var(--forensik-pending);
}

/* Failed state */
.wiki-failed {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--forensik-failed-border);
  background: var(--forensik-failed-bg);
}

.wiki-failed-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.wiki-failed-icon {
  width: 20px;
  height: 20px;
  color: var(--forensik-failed);
}

.wiki-failed-title {
  font-weight: var(--font-weight-semibold);
  color: var(--forensik-failed);
}

/* ============================================================================
   SECTION 31: FORENSIK — HASH DISPLAY
   ============================================================================ */

.wiki-hash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
}

.wiki-hash-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  flex-shrink: 0;
}

.wiki-hash-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--forensik-hash);
  word-break: break-all;
  flex: 1;
}

.wiki-hash-copy {
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.wiki-hash-copy:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

/* ============================================================================
   SECTION 32: FORENSIK — CUSTODY CHAIN
   ============================================================================ */

.wiki-custody {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
}

.wiki-custody-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}

.wiki-custody-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  bottom: -12px;
  width: 2px;
  background: var(--border-default);
}

.wiki-custody-dot {
  width: 10px;
  height: 10px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.wiki-custody-item:first-child .wiki-custody-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px var(--accent-muted);
}

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

.wiki-custody-version {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.wiki-custody-hash {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--forensik-hash);
}

.wiki-custody-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ============================================================================
   SECTION 33: SPIRAL DYNAMICS — BADGES
   ============================================================================ */

.wiki-spiral {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.wiki-spiral-beige { 
  background: rgba(212, 165, 116, 0.15); 
  color: var(--spiral-beige); 
}

.wiki-spiral-purple { 
  background: rgba(139, 92, 246, 0.15); 
  color: var(--spiral-purple); 
}

.wiki-spiral-red { 
  background: rgba(220, 38, 38, 0.15); 
  color: var(--spiral-red); 
}

.wiki-spiral-blue { 
  background: rgba(37, 99, 235, 0.15); 
  color: var(--spiral-blue); 
}

.wiki-spiral-orange { 
  background: rgba(234, 88, 12, 0.15); 
  color: var(--spiral-orange); 
}

.wiki-spiral-green { 
  background: rgba(22, 163, 74, 0.15); 
  color: var(--spiral-green); 
}

.wiki-spiral-yellow { 
  background: rgba(202, 138, 4, 0.15); 
  color: var(--spiral-yellow); 
}

.wiki-spiral-turquoise { 
  background: rgba(13, 148, 136, 0.15); 
  color: var(--spiral-turquoise); 
}

/* ============================================================================
   SECTION 34: SPIRAL DYNAMICS — LEVEL INDICATOR
   ============================================================================ */

.wiki-level-indicator {
  margin: var(--space-4) 0;
}

.wiki-level-track {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.wiki-level-segment {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  opacity: 0.3;
  transition: all var(--duration-fast) var(--ease-out);
}

.wiki-level-segment[data-level="beige"] { background: var(--spiral-beige); }
.wiki-level-segment[data-level="purple"] { background: var(--spiral-purple); }
.wiki-level-segment[data-level="red"] { background: var(--spiral-red); }
.wiki-level-segment[data-level="blue"] { background: var(--spiral-blue); }
.wiki-level-segment[data-level="orange"] { background: var(--spiral-orange); }
.wiki-level-segment[data-level="green"] { background: var(--spiral-green); }
.wiki-level-segment[data-level="yellow"] { background: var(--spiral-yellow); }
.wiki-level-segment[data-level="turquoise"] { background: var(--spiral-turquoise); }

.wiki-level-segment.active {
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
}

.wiki-level-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--accent-primary);
}

/* ============================================================================
   SECTION 35: SPIRAL DYNAMICS — PERSPECTIVE TABS
   ============================================================================ */

.wiki-perspectives {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  padding: var(--space-1);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.wiki-perspective-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.wiki-perspective-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.wiki-perspective-tab.active {
  background: var(--accent-primary);
  color: var(--text-inverted);
}

.wiki-perspective-content {
  display: none;
  margin-top: var(--space-4);
}

.wiki-perspective-content[data-active="true"],
.wiki-perspective-content.active {
  display: block;
}

/* ============================================================================
   SECTION 36: PUBLISH HEADER & FOOTER
   ============================================================================ */

.publish-footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6);
  text-align: center;
  font-size: 0.625rem;               /* 10px - smaller */
  color: var(--footer-text);         /* Ultra subtle - theme specific */
}

/* ============================================================================
   SECTION 37: UTILITIES
   ============================================================================ */

/* Text colors */
.text-turquoise { color: var(--accent-primary); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* Background colors */
.bg-turquoise { background: var(--accent-muted); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }

/* Font utilities */
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-medium { font-weight: var(--font-weight-medium); }

/* Text size */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Spacing utilities */
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox utilities */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

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

/* Border radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================================================
   SECTION 38: RESPONSIVE DESIGN
   ============================================================================ */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  :root {
    --sidebar-width: 100%;
    --toc-width: 100%;
    --content-padding: 24px;
  }
  
  .site-body {
    flex-direction: column;
  }
  
  .site-body-left-column {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .site-body-right-column {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    position: relative;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
  
  .wiki-infobox {
    float: none;
    width: 100%;
    margin: var(--space-4) 0;
  }
  
  .wiki-cards {
    grid-template-columns: 1fr;
  }
  
  .wiki-sitemap {
    grid-template-columns: 1fr;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --sidebar-width: 200px;
    --toc-width: 180px;
    --content-padding: 32px;
  }
  
  .wiki-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .wiki-sitemap {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .wiki-infobox {
    width: 220px;
  }
}

/* Desktop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --sidebar-width: 220px;
    --toc-width: 190px;
  }
  
  .wiki-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wide (1280px+) */
@media (min-width: 1280px) {
  :root {
    --sidebar-width: 260px;
    --toc-width: 220px;
    --content-max-width: 800px;
  }
  
  .wiki-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .wiki-sitemap {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Extra wide (1536px+) */
@media (min-width: 1536px) {
  :root {
    --sidebar-width: 280px;
    --toc-width: 240px;
    --content-max-width: 860px;
  }
  
  .wiki-cards {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .wiki-sitemap {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================================
   SECTION 39: PRINT STYLES
   ============================================================================ */

@media print {
  :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent-primary: #008B8B;
  }
  
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* Hide navigation elements */
  .wiki-nav,
  .site-header,
  .publish-header,
  .site-body-left-column,
  .site-body-right-column,
  .site-footer,
  .publish-footer,
  .wiki-footer,
  .nav-view-outer,
  .outline-view,
  .search-input-container {
    display: none !important;
  }
  
  /* Make content full width */
  .site-body-center-column {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Links */
  a {
    color: black !important;
    text-decoration: underline !important;
  }
  
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Code blocks */
  pre {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    border-left-color: #008B8B !important;
    page-break-inside: avoid;
  }
  
  code {
    background-color: #f0f0f0 !important;
  }
}

/* ============================================================================
   SECTION 40: ACCESSIBILITY
   ============================================================================ */

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

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

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --border-default: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
  }
  
  .theme-light {
    --border-default: rgba(0, 0, 0, 0.3);
    --border-strong: rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================================
   SECTION 41: SCROLLBAR — Ultra subtle
   ============================================================================ */

/* WebKit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ============================================================================
   SECTION 42: SELECTION
   ============================================================================ */

::selection {
  background-color: var(--accent-muted);
  color: var(--text-primary);
}

::-moz-selection {
  background-color: var(--accent-muted);
  color: var(--text-primary);
}

/* ============================================================================
   SECTION 43: MERMAID DIAGRAMS
   ============================================================================ */

.mermaid {
  margin: var(--space-4) 0;
  text-align: center;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  stroke: var(--accent-primary) !important;
  stroke-width: 2px;
}

.mermaid .edgePath path {
  stroke: var(--accent-border) !important;
}

.mermaid .label {
  color: var(--text-primary) !important;
  font-family: var(--font-text);
}

/* ============================================================================
   SECTION 44: GRAPH VIEW
   ============================================================================ */

.graph-view {
  background-color: var(--bg-primary);
}

.graph-view.color-fill-focused {
  color: var(--accent-primary);
}

.graph-view .links line {
  stroke: var(--border-default) !important;
}

.graph-view .nodes circle {
  fill: var(--text-muted) !important;
}

.graph-view .nodes circle.is-active,
.graph-view .nodes circle.is-focused {
  fill: var(--accent-primary) !important;
}

/* ============================================================================
   SECTION 45: EMBEDS
   ============================================================================ */

.internal-embed,
.markdown-embed {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background-color: var(--bg-secondary);
}

.markdown-embed-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.markdown-embed-link {
  color: var(--accent-primary);
}

/* PDF embeds */
.pdf-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ============================================================================
   SECTION 46: SEARCH HIGHLIGHTS
   ============================================================================ */

.search-result-file-match-highlight,
.search-highlight {
  background-color: var(--accent-muted);
  color: var(--accent-primary);
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================================================
   SECTION 47: TOOLTIPS
   ============================================================================ */

.tooltip {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
}

/* ============================================================================
   SECTION 48: FINAL NUCLEAR PURPLE OVERRIDE
   ============================================================================ */

/* Catch any inline styles with purple */
[style*="purple"],
[style*="#7C3AED"],
[style*="#8B5CF6"],
[style*="#6366F1"],
[style*="#A855F7"],
[style*="rgb(124, 58, 237)"],
[style*="rgb(139, 92, 246)"],
[style*="rgb(99, 102, 241)"],
[style*="rgb(168, 85, 247)"] {
  color: var(--accent-primary) !important;
}

/* Override any remaining accent colors */
.mod-active .nav-file-title-content,
.is-active .nav-file-title-content {
  color: var(--accent-primary) !important;
}

/* Ensure all interactive elements use turquoise */
.clickable-icon:hover,
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover {
  color: var(--accent-primary) !important;
}

/* Progress bars and sliders */
input[type="range"]::-webkit-slider-thumb {
  background: var(--accent-primary);
}

input[type="range"]::-moz-range-thumb {
  background: var(--accent-primary);
}

progress::-webkit-progress-value {
  background: var(--accent-primary);
}

progress::-moz-progress-bar {
  background: var(--accent-primary);
}

/* ============================================================================
   END OF TURQUOISEPAPERS CSS v11.0.0
   ============================================================================
   
   Summary:
   ════════════════════════════════════════════════════════════════════════════
   
   COLORS (Linear exact):
   - Dark Mode: #111113 background (Linear-matched zinc)
   - Light Mode: #FFFFFF pure white (Linear exact)
   - Both modes: Unified zinc palette for grays
   - Accent: #00CED1 turquoise (Perplexity) — ONLY accent color
   - Zero purple (nuclear override active)
   
   LAYOUT (Linear exact):
   - Left sidebar: 240px (260px on wide, 280px on extra-wide)
   - Right TOC: 200px (220px on wide, 240px on extra-wide)
   - Content max-width: 760px (800px on wide, 860px on extra-wide)
   - Content padding: 48px
   
   TYPOGRAPHY:
   - Font: Inter, weights 400/500/600/700
   - Base size: 15px (0.9375rem)
   - Mono: JetBrains Mono
   
   COMPONENTS INCLUDED:
   - WikiOS: nav, cards, infobox, badges, status, sitemap, footer
   - Forensik: verification blocks (3 states), hash display, custody chain
   - Spiral Dynamics: spiral badges (8 colors), level indicator, perspective tabs
   - Callouts: Full Obsidian native support with semantic colors
   - All standard Markdown elements
   
   FEATURES:
   - Full responsive (mobile → tablet → desktop → wide → extra-wide)
   - Print optimized
   - Accessibility compliant (WCAG AA contrast ratios)
   - Reduced motion support
   - High contrast mode support
   - Custom scrollbar styling
   - Mermaid diagram support
   - Graph view turquoise nodes
   
   ════════════════════════════════════════════════════════════════════════════
   
   © 2025 Amplifik AI Inc. — Ecosistema AK7
   
   ============================================================================ */


/* ============================================================================
   HUB DASHBOARD — Dual mode (dark + light)
   ============================================================================ */

.hub-dashboard .frontmatter-container,
.hub-dashboard .metadata-container {
  display: none !important;
}

.hub-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hub-header {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
}

.hub-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
  margin: 0 0 0.5rem 0;
}

.hub-subtitle {
  font-size: 1rem;
  color: var(--text-muted) !important;
  margin: 0 0 1.5rem 0;
}

.hub-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hub-pill {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary) !important;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
}

.hub-pill.active {
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
  border-color: var(--text-primary) !important;
}

.theme-light .hub-pill.active {
  background: #18181B !important;
  color: #FFFFFF !important;
}

.hub-grid {
  display: table !important;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid var(--border-default);
  margin-top: 1.5rem;
}

.hub-column {
  display: table-cell !important;
  width: 50% !important;
  vertical-align: top;
  border-right: 1px solid var(--border-default);
}

.hub-column:last-child {
  border-right: none;
}

@media (max-width: 600px) {
  .hub-grid {
    display: block !important;
  }
  .hub-column {
    display: block !important;
    width: 100% !important;
    border-right: none;
  }
}

.hub-section-title {
  padding: 1rem 1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted) !important;
}

.hub-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s ease;
  color: var(--text-primary) !important;
}

.hub-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.hub-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #1E1E21;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #71717A !important;
  overflow: hidden;
}

.theme-light .hub-icon {
  background: #F4F4F5;
  color: #71717A !important;
}

.hub-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
}

.hub-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary) !important;
}

.hub-link,
.hub-link:link,
.hub-link:visited,
.hub-link:hover,
.hub-link:active,
.hub-link .hub-name,
a.hub-link,
a.hub-link:link,
a.hub-link:visited,
a.hub-link .hub-name {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.hub-meta {
  font-size: 0.75rem;
  color: var(--text-muted) !important;
  text-align: right;
  flex-shrink: 0;
}

.hub-footer {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-subtle);
}

.theme-light .hub-grid {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.theme-light .hub-column {
  border-right-color: rgba(0, 0, 0, 0.06);
}

.theme-light .hub-link {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

.theme-light .hub-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}


/* Ocultar frontmatter que se filtra como texto */
.markdown-preview-view > p:first-child,
.markdown-rendered > p:first-child {
  display: none !important;
}

/* Específico para cssclass leak */
.publish-article-view > .markdown-preview-view > p:first-of-type:not(:has(a)):not(:has(span)) {
  display: none !important;
}

/* Nuclear: ocultar cualquier párrafo que contenga "cssclass" */
p:has-text("cssclass") {
  display: none !important;
}
```

**Pero mejor haz esto:**

En Obsidian, abre `Hi.md` en modo edición (Source Mode, no Live Preview), y verifica que las primeras líneas sean exactamente:
```
---
cssclass: hub-dashboard
---

/* ============================================================================
   OCULTAR FRONTMATTER — NUCLEAR
   ============================================================================ */

/* Ocultar cualquier párrafo antes del hub-container */
.hub-dashboard .markdown-preview-view > *:not(.hub-container):not(div):not(hr),
.hub-dashboard .markdown-rendered > *:not(.hub-container):not(div):not(hr) {
  display: none !important;
}

/* Ocultar párrafos sueltos al inicio */
.hub-dashboard p:not([class]) {
  display: none !important;
}

/* Restaurar párrafos dentro del hub */
.hub-dashboard .hub-container p,
.hub-dashboard .hub-subtitle {
  display: block !important;
}