/* ==========================================================================
   adk-fluent — Documentation Design System v2
   A premium visual language for world-class developer documentation.

   Architecture:
     1. Design tokens (CSS custom properties)
     2. Theme transitions & dark mode
     3. Typography system
     4. Code presentation
     5. Navigation & wayfinding
     6. Content containers (cards, admonitions, tabs, tables)
     7. Hero & landing page
     8. Journey cards
     9. API reference polish
    10. Prev/next navigation
    11. Announcement bar
    12. Search & highlighting
    13. Table responsiveness
    14. Sidebar logo
    15. Responsive
    16. Print
    17. Accessibility
    18. Dark mode refinements
    19. Hero architecture diagram
    20. Visual reference cards
    21. Architecture diagrams
    22. Premium micro-interactions
    23. Typography refinements
    24. Footer polish
    25. Decision guide
    26. Cookbook grid polish
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand (warm orange/amber) ---- */
  --adk-accent: #E65100;
  --adk-accent-hover: #BF360C;
  --adk-accent-light: #F57C00;
  --adk-accent-lighter: #FF9800;
  --adk-accent-lightest: #FFB74D;
  --adk-accent-bg: #FFF3E0;
  --adk-accent-bg-hover: #FFE0B2;

  /* ---- Semantic palette ---- */
  --adk-success: #059669;
  --adk-success-bg: #ecfdf5;
  --adk-success-border: #a7f3d0;
  --adk-warning: #d97706;
  --adk-warning-bg: #fffbeb;
  --adk-warning-border: #fde68a;
  --adk-danger: #dc2626;
  --adk-danger-bg: #fef2f2;
  --adk-danger-border: #fecaca;
  --adk-info: #0284c7;
  --adk-info-bg: #f0f9ff;
  --adk-info-border: #bae6fd;

  /* ---- Surfaces ---- */
  --adk-surface: #FAFAFA;
  --adk-surface-raised: #ffffff;
  --adk-surface-sunken: #F5F5F5;
  --adk-border: #E0E0E0;
  --adk-border-hover: #BDBDBD;
  --adk-border-subtle: #F5F5F5;
  --adk-text-primary: #1A1A1A;
  --adk-text-secondary: #424242;
  --adk-text-muted: #757575;
  --adk-text-faint: #9E9E9E;

  /* ---- Gradients ---- */
  --adk-gradient-start: #E65100;
  --adk-gradient-mid: #F57C00;
  --adk-gradient-end: #FFB74D;
  --adk-gradient-brand: linear-gradient(135deg, #E65100, #F57C00, #FFB74D);
  --adk-gradient-subtle: linear-gradient(135deg, #FFF3E0 0%, #FFF8E1 50%, #FFFDE7 100%);
  --adk-hero-bg: linear-gradient(135deg, #FFF3E0 0%, #FFF8E1 50%, #FFFDE7 100%);

  /* ---- Glass ---- */
  --adk-glass-bg: rgba(255, 255, 255, 0.7);
  --adk-glass-border: rgba(255, 255, 255, 0.5);
  --adk-glass-blur: blur(16px);

  /* ---- Elevation ---- */
  --adk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --adk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --adk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --adk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --adk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --adk-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
  --adk-shadow-glow: 0 0 20px rgba(230, 81, 0, 0.12);
  --adk-shadow-glow-lg: 0 0 40px rgba(230, 81, 0, 0.15);

  /* ---- Motion ---- */
  --adk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --adk-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --adk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --adk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --adk-duration: 0.2s;
  --adk-duration-slow: 0.35s;
  --adk-transition: var(--adk-duration) var(--adk-ease);
  --adk-transition-slow: var(--adk-duration-slow) var(--adk-ease);

  /* ---- Radii ---- */
  --adk-radius-xs: 4px;
  --adk-radius-sm: 6px;
  --adk-radius-md: 10px;
  --adk-radius-lg: 14px;
  --adk-radius-xl: 20px;
  --adk-radius-pill: 100px;

  /* ---- Spacing ---- */
  --adk-content-gap: 1.75rem;
  --adk-section-gap: 3rem;

  /* ---- Mermaid ---- */
  --mermaid-font-family: var(--font-stack);

  /* ---- Reading progress ---- */
  --adk-progress: 0%;
}


/* --------------------------------------------------------------------------
   Dark mode tokens
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --adk-accent: #FFB74D;
  --adk-accent-hover: #FFCC80;
  --adk-accent-light: #FFCC80;
  --adk-accent-lighter: #FFE0B2;
  --adk-accent-lightest: #FFF3E0;
  --adk-accent-bg: rgba(255, 183, 77, 0.12);
  --adk-accent-bg-hover: rgba(255, 183, 77, 0.2);

  --adk-success: #34d399;
  --adk-success-bg: rgba(52, 211, 153, 0.12);
  --adk-success-border: rgba(52, 211, 153, 0.28);
  --adk-warning: #fbbf24;
  --adk-warning-bg: rgba(251, 191, 36, 0.12);
  --adk-warning-border: rgba(251, 191, 36, 0.28);
  --adk-danger: #f87171;
  --adk-danger-bg: rgba(248, 113, 113, 0.12);
  --adk-danger-border: rgba(248, 113, 113, 0.28);
  --adk-info: #38bdf8;
  --adk-info-bg: rgba(56, 189, 248, 0.12);
  --adk-info-border: rgba(56, 189, 248, 0.28);

  --adk-surface: #171717;
  --adk-surface-raised: #1E1E1E;
  --adk-surface-sunken: #121212;
  --adk-border: #333333;
  --adk-border-hover: #4A4A4A;
  --adk-border-subtle: #252525;
  --adk-text-primary: #E0E0E0;
  --adk-text-secondary: #BDBDBD;
  --adk-text-muted: #9E9E9E;
  --adk-text-faint: #757575;

  /* Gradients: use brighter tones visible on dark backgrounds */
  --adk-gradient-start: #FFB74D;
  --adk-gradient-mid: #FFCC80;
  --adk-gradient-end: #FFE0B2;
  --adk-gradient-brand: linear-gradient(135deg, #FFB74D, #FFCC80, #FFE0B2);
  --adk-gradient-subtle: linear-gradient(135deg, rgba(255, 183, 77, 0.08) 0%, rgba(255, 204, 128, 0.05) 50%, rgba(255, 224, 178, 0.03) 100%);

  --adk-hero-bg: linear-gradient(
    135deg,
    rgba(255, 183, 77, 0.1) 0%,
    rgba(255, 152, 0, 0.06) 50%,
    rgba(255, 183, 77, 0.03) 100%
  );

  --adk-glass-bg: rgba(23, 23, 23, 0.8);
  --adk-glass-border: rgba(255, 183, 77, 0.12);

  --adk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --adk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --adk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --adk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
  --adk-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
  --adk-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
  --adk-shadow-glow: 0 0 24px rgba(255, 183, 77, 0.15);
  --adk-shadow-glow-lg: 0 0 48px rgba(255, 183, 77, 0.2);
}

/* ==========================================================================
   2. THEME TRANSITIONS & DARK MODE
   ========================================================================== */

/* Smooth color transitions when toggling theme */
body,
.sidebar-drawer,
.page,
.content,
.toc-drawer {
  transition:
    background-color 0.3s var(--adk-ease),
    color 0.3s var(--adk-ease),
    border-color 0.3s var(--adk-ease);
}

/* Mermaid diagrams: polished rendering with consistent styling */
.mermaid {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg, 14px);
  background: var(--adk-surface, #fff);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mermaid svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

[data-theme="dark"] .mermaid {
  filter: none;
  background: var(--adk-surface-sunken, #141414);
  border-color: var(--adk-border);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

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


/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   ========================================================================== */

/* ---- Headings ---- */

.content h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: none;
  position: relative;
  font-size: 2rem;
  line-height: 1.2;
}

/* Gradient underline for h1 */
.content h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--adk-gradient-brand);
  border-radius: 2px;
}

.content h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: var(--adk-section-gap);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--adk-border);
  font-size: 1.5rem;
  line-height: 1.3;
  position: relative;
}

.content h3 {
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-top: 2.25rem;
  color: var(--color-foreground-primary);
  font-size: 1.2rem;
  line-height: 1.35;
}

.content h4 {
  font-weight: 600;
  margin-top: 1.75rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

/* ---- Body text ---- */

.content p {
  line-height: 1.8;
  color: var(--adk-text-secondary);
}

.content li {
  line-height: 1.75;
}

/* ---- Inline code: refined pill ---- */

.content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code) {
  background: var(--adk-accent-bg);
  color: var(--adk-accent);
  padding: 0.15em 0.45em;
  border-radius: var(--adk-radius-xs);
  font-size: 0.87em;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--adk-accent) 12%, transparent);
  transition: all var(--adk-transition);
  white-space: nowrap;
}

.content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code):hover {
  border-color: var(--adk-accent-light);
  background: var(--adk-accent-bg-hover);
  box-shadow: var(--adk-shadow-sm);
}

[data-theme="dark"] .content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code) {
  background: rgba(255, 183, 77, 0.1);
  color: var(--adk-accent-lighter);
  border-color: rgba(255, 183, 77, 0.15);
}

[data-theme="dark"] .content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code):hover {
  background: rgba(255, 183, 77, 0.18);
  border-color: rgba(255, 183, 77, 0.3);
}

/* Code inside headings: clean monospace, no pill */
.content h1 code,
.content h2 code,
.content h3 code,
.content h4 code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  font-size: 0.9em;
  font-weight: 600;
}

/* ---- Links ---- */

.content a:not(.sd-card):not(.headerlink) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--adk-accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all var(--adk-transition);
}

.content a:not(.sd-card):not(.headerlink):hover {
  text-decoration-color: var(--adk-accent);
  text-decoration-thickness: 2px;
  color: var(--adk-accent);
}

/* ---- Header anchor links ---- */

.headerlink {
  opacity: 0;
  font-size: 0.65em;
  padding-left: 0.4em;
  color: var(--adk-text-faint);
  text-decoration: none;
  transition: opacity var(--adk-transition), color var(--adk-transition);
  vertical-align: middle;
}

h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
.headerlink:focus-visible {
  opacity: 0.7;
}

.headerlink:hover {
  color: var(--adk-accent);
  opacity: 1;
}


/* ==========================================================================
   4. CODE PRESENTATION
   ========================================================================== */

/* ---- Code blocks ---- */

.content pre {
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-md);
  box-shadow: var(--adk-shadow-sm);
  margin: var(--adk-content-gap) 0;
  transition: all var(--adk-transition);
  position: relative;
  overflow: hidden;
}

/* Accent top border instead of left border */
.content pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--adk-gradient-brand);
  z-index: 1;
}

.content pre:hover {
  box-shadow: var(--adk-shadow-md);
  border-color: var(--adk-border-hover);
}

/* ---- Copy button ---- */

.content pre .copybtn {
  opacity: 0;
  transition: all var(--adk-transition);
  border-radius: var(--adk-radius-sm);
  top: 8px;
  right: 8px;
}

.content pre:hover .copybtn {
  opacity: 0.5;
}

.content pre .copybtn:hover {
  opacity: 1;
  background: var(--adk-accent);
  color: white;
  box-shadow: var(--adk-shadow-sm);
}

.content pre .copybtn.success {
  opacity: 1;
  background: var(--adk-success);
  color: white;
  transition: background 0.15s var(--adk-ease);
}

/* ---- Language labels ---- */

.content .highlight[class*="highlight-"] {
  position: relative;
  /* Ensure the highlight wrapper creates a positioning context even inside
     sphinx-design tabs, grid cards, and other layout containers. */
  isolation: isolate;
}

.content .highlight[class*="highlight-"]::before {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-stack--monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--adk-text-faint);
  background: var(--adk-surface);
  border-radius: var(--adk-radius-xs);
  border: 1px solid var(--adk-border);
  z-index: 2;
  pointer-events: none;
  line-height: 1;
  /* Prevent label from appearing as inline text if absolute positioning fails */
  display: block;
  width: fit-content;
  margin-left: auto;
}

.content .highlight-python::before { content: "python"; }
.content .highlight-bash::before,
.content .highlight-shell::before,
.content .highlight-console::before { content: "shell"; }
.content .highlight-yaml::before { content: "yaml"; }
.content .highlight-json::before { content: "json"; }
.content .highlight-toml::before { content: "toml"; }
.content .highlight-javascript::before,
.content .highlight-js::before { content: "js"; }
.content .highlight-typescript::before,
.content .highlight-ts::before { content: "ts"; }
.content .highlight-text::before { content: "text"; }
.content .highlight-markdown::before,
.content .highlight-md::before { content: "md"; }
.content .highlight-ini::before { content: "ini"; }
.content .highlight-diff::before { content: "diff"; }
.content .highlight-mermaid::before { content: "mermaid"; }

/* Fix language labels inside sphinx-design tabs — the tab panel's overflow
   and transform context can break absolute positioning of the ::before label */
.sd-tab-content .highlight[class*="highlight-"] {
  position: relative;
  overflow: visible;
}

/* Ensure copy buttons are always accessible inside tab panels */
.sd-tab-content .copybtn {
  z-index: 3;
}


/* ==========================================================================
   5. NAVIGATION & WAYFINDING
   ========================================================================== */

/* ---- Version switcher ---- */

.version-switcher {
  position: relative;
  margin: 0.5rem 1rem 0.75rem;
}

.version-switcher__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-stack--monospace);
  color: var(--color-foreground-secondary);
  background: var(--adk-surface, #fff);
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-sm);
  cursor: pointer;
  transition: all var(--adk-transition);
}

.version-switcher__button:hover {
  border-color: var(--adk-accent-light);
  background: var(--adk-surface-raised);
}

.version-switcher__chevron {
  transition: transform var(--adk-transition);
  flex-shrink: 0;
}

.version-switcher__button[aria-expanded="true"] .version-switcher__chevron {
  transform: rotate(180deg);
}

.version-switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--adk-surface-raised, #fff);
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-sm);
  box-shadow: var(--adk-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}

.version-switcher__item {
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-family: var(--font-stack--monospace);
  color: var(--color-foreground-secondary);
  text-decoration: none;
  transition: all var(--adk-transition);
}

.version-switcher__item:hover {
  background: var(--adk-accent-bg, #FFF3E0);
  color: var(--adk-accent);
}

.version-switcher__item--active {
  color: var(--adk-accent);
  font-weight: 700;
  background: var(--adk-accent-bg, #FFF3E0);
}

.version-switcher__item--active::before {
  content: "● ";
  font-size: 0.6em;
}

[data-theme="dark"] .version-switcher__button {
  background: var(--adk-surface-sunken, #141414);
}

[data-theme="dark"] .version-switcher__menu {
  background: var(--adk-surface-raised, #1e1e1e);
  border-color: var(--adk-border);
}

[data-theme="dark"] .version-switcher__item:hover {
  background: rgba(255, 183, 77, 0.1);
}

[data-theme="dark"] .version-switcher__item--active {
  background: rgba(255, 183, 77, 0.1);
}

/* ---- Active sidebar item ---- */

.sidebar-tree .current-page > .reference {
  font-weight: 700;
  color: var(--adk-accent);
  background: var(--adk-accent-bg);
  border-radius: var(--adk-radius-sm);
  padding: 0.3rem 0.6rem;
  margin: 0 -0.3rem;
}

/* ---- Sidebar links hover ---- */

.sidebar-tree a {
  transition: all var(--adk-transition);
  border-radius: var(--adk-radius-xs);
  padding: 0.2rem 0.4rem;
  margin: 0 -0.2rem;
}

.sidebar-tree a:hover {
  background: var(--adk-accent-bg);
  color: var(--adk-accent);
}

/* ---- Sidebar section captions ---- */

.sidebar-tree .caption {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--adk-text-muted);
  font-weight: 800;
  margin-top: 1.75rem;
  padding-bottom: 0.4rem;
  border-bottom: none;
  position: relative;
}

.sidebar-tree .caption::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--adk-gradient-brand);
  border-radius: 1px;
}

/* ---- "On this page" (TOC sidebar) ---- */

.toc-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--adk-text-muted);
  padding-bottom: 0.6rem;
  border-bottom: none;
  margin-bottom: 0.75rem;
  position: relative;
}

.toc-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--adk-gradient-brand);
  border-radius: 1px;
}

.toc-tree a {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.25rem 0.75rem;
  color: var(--adk-text-muted);
  transition: all var(--adk-transition);
  border-left: 2px solid var(--adk-border-subtle);
  display: block;
  border-radius: 0 var(--adk-radius-xs) var(--adk-radius-xs) 0;
}

.toc-tree a:hover {
  color: var(--adk-accent);
  border-left-color: var(--adk-accent-lighter);
  background: var(--adk-accent-bg);
}

.toc-tree a.active {
  color: var(--adk-accent);
  font-weight: 600;
  border-left-color: var(--adk-accent);
  background: var(--adk-accent-bg);
}

/* ---- Reading progress bar ---- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--adk-progress);
  height: 3px;
  background: var(--adk-gradient-brand);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: var(--adk-shadow-glow);
}


/* ==========================================================================
   6. CONTENT CONTAINERS
   ========================================================================== */

/* ---- Cards ---- */

.sd-card {
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg);
  box-shadow: var(--adk-shadow-sm);
  transition: all var(--adk-duration-slow) var(--adk-ease);
  overflow: hidden;
  background: var(--adk-surface-raised);
}

.sd-card:hover {
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  transform: translateY(-3px);
  border-color: var(--adk-accent-light);
}

.sd-card .sd-card-header {
  background: var(--adk-surface);
  border-bottom: 1px solid var(--adk-border);
  font-weight: 600;
  padding: 0.85rem 1.25rem;
}

.sd-card .sd-card-body {
  padding: 1.25rem 1.5rem;
}

.sd-card .sd-card-title a {
  color: var(--color-foreground-primary);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--adk-transition);
}

.sd-card:hover .sd-card-title a {
  color: var(--adk-accent);
}


/* ---- Admonitions ---- */

.admonition {
  border-radius: var(--adk-radius-md);
  border: 1px solid var(--adk-border);
  border-left: none;
  box-shadow: var(--adk-shadow-xs);
  margin: var(--adk-content-gap) 0;
  overflow: hidden;
  position: relative;
}

/* Gradient left accent bar */
.admonition::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.admonition.important,
.admonition.note {
  background: var(--adk-accent-bg);
  border-color: rgba(230, 81, 0, 0.15);
}
.admonition.important::before,
.admonition.note::before {
  background: linear-gradient(to bottom, var(--adk-accent), var(--adk-accent-light));
}

.admonition.tip,
.admonition.hint {
  background: var(--adk-success-bg);
  border-color: var(--adk-success-border);
}
.admonition.tip::before,
.admonition.hint::before {
  background: linear-gradient(to bottom, var(--adk-success), #34d399);
}

.admonition.warning,
.admonition.caution {
  background: var(--adk-warning-bg);
  border-color: var(--adk-warning-border);
}
.admonition.warning::before,
.admonition.caution::before {
  background: linear-gradient(to bottom, var(--adk-warning), #f59e0b);
}

.admonition.danger,
.admonition.error {
  background: var(--adk-danger-bg);
  border-color: var(--adk-danger-border);
}
.admonition.danger::before,
.admonition.error::before {
  background: linear-gradient(to bottom, var(--adk-danger), #ef4444);
}

.admonition .admonition-title {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.65rem 1rem 0.55rem 1.25rem;
}

.admonition > :not(.admonition-title) {
  padding-left: 1.25rem;
  padding-right: 1rem;
}


/* ---- Tab sets ---- */

.sd-tab-set {
  border-radius: var(--adk-radius-md);
  overflow: hidden;
  border: 1px solid var(--adk-border);
  box-shadow: var(--adk-shadow-sm);
  margin: var(--adk-content-gap) 0;
}

.sd-tab-set > label {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.25rem;
  transition: all var(--adk-transition);
  border-bottom: 2px solid transparent;
  position: relative;
}

.sd-tab-set > label:hover {
  background: var(--adk-accent-bg);
  color: var(--adk-accent);
}

.sd-tab-set > input:checked + label {
  border-bottom-color: var(--adk-accent);
  color: var(--adk-accent);
  background: var(--adk-accent-bg);
  font-weight: 700;
}


/* ---- Tables ---- */

.content table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-md);
  overflow: hidden;
  width: 100%;
  margin: var(--adk-content-gap) 0;
  box-shadow: var(--adk-shadow-sm);
}

.content table thead th {
  background: var(--adk-surface);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.25rem;
  border-bottom: 2px solid var(--adk-accent);
  text-align: left;
  color: var(--adk-text-secondary);
}

.content table tbody td {
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--adk-border-subtle);
  font-size: 0.9rem;
  line-height: 1.6;
}

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

.content table tbody tr {
  transition: background var(--adk-transition);
}

.content table tbody tr:hover {
  background: var(--adk-accent-bg);
}

/* Zebra striping */
.content table tbody tr:nth-child(even) {
  background: var(--adk-surface);
}

.content table tbody tr:nth-child(even):hover {
  background: var(--adk-accent-bg);
}

[data-theme="dark"] .content table thead th {
  background: rgba(255, 183, 77, 0.06);
}


/* ---- Blockquotes ---- */

.content blockquote {
  border-left: 3px solid var(--adk-accent);
  background: var(--adk-surface);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--adk-radius-md) var(--adk-radius-md) 0;
  margin: var(--adk-content-gap) 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--adk-text-secondary);
}

.content blockquote p {
  margin: 0.3rem 0;
}


/* ---- Definition lists (API docs) ---- */

.content dl dt {
  font-weight: 700;
  margin-top: 1.25rem;
  padding-bottom: 0.2rem;
}

.content dl dd {
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--adk-border);
}


/* ---- "See also" admonition ---- */

.seealso {
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-md);
  padding: 0.75rem 1rem;
  background: var(--adk-surface);
}

.seealso::before {
  display: none;
}

.seealso .admonition-title {
  font-size: 0.72rem;
}


/* ==========================================================================
   7. HERO & LANDING PAGE
   ========================================================================== */

.hero-section {
  background: var(--adk-hero-bg);
  border-radius: var(--adk-radius-xl);
  padding: 3.5rem 3rem 3rem;
  margin: -1rem -0.5rem 2.5rem -0.5rem;
  text-align: center;
  border: 1px solid var(--adk-border);
  position: relative;
  overflow: hidden;
  box-shadow: var(--adk-shadow-md);
}

/* Dot grid pattern overlay */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(230, 81, 0, 0.06) 1px,
    transparent 0
  );
  background-size: 24px 24px;
  pointer-events: none;
}

[data-theme="dark"] .hero-section::before {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 183, 77, 0.06) 1px,
    transparent 0
  );
}

/* Subtle radial gradient glow behind hero */
.hero-section::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--adk-accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--adk-accent) 5%, transparent) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Dark mode: brighten hero SVG diagram text and strokes */
[data-theme="dark"] .hero-flow-svg text[fill="#9E9E9E"] { fill: #BDBDBD; }
[data-theme="dark"] .hero-flow-svg text[fill="#757575"] { fill: #9E9E9E; }
[data-theme="dark"] .hero-flow-svg rect[stroke="#E65100"] { stroke: #FFB74D; }
[data-theme="dark"] .hero-flow-svg rect[fill="#E6510008"] { fill: rgba(255, 183, 77, 0.06); }
[data-theme="dark"] .hero-flow-svg text[fill="#F57C00"] { fill: #FFCC80; }
[data-theme="dark"] .hero-flow-svg rect[stroke="#F57C00"] { stroke: #FFCC80; }
[data-theme="dark"] .hero-flow-svg rect[fill="#F57C0008"] { fill: rgba(255, 204, 128, 0.06); }
[data-theme="dark"] .hero-flow-svg text[fill="#FFB74D"] { fill: #FFE0B2; }
[data-theme="dark"] .hero-flow-svg line[stroke="#F57C00"] { stroke: #FFCC80; }
[data-theme="dark"] .hero-flow-svg line[stroke="#10b981"] { stroke: #34d399; }
[data-theme="dark"] .hero-flow-svg text[fill="#34d399"] { fill: #6ee7b7; }
[data-theme="dark"] .hero-flow-svg text[fill="#fbbf24"] { fill: #fde68a; }
[data-theme="dark"] .hero-flow-svg rect[stroke="#10b981"] { stroke: #34d399; }
[data-theme="dark"] .hero-flow-svg rect[fill="#10b98108"] { fill: rgba(52, 211, 153, 0.06); }
[data-theme="dark"] .hero-flow-svg rect[stroke="#f59e0b"] { stroke: #fbbf24; }
[data-theme="dark"] .hero-flow-svg rect[fill="#f59e0b06"] { fill: rgba(251, 191, 36, 0.06); }
[data-theme="dark"] .hero-flow-svg path[fill="#F57C00"] { fill: #FFCC80; }

.hero-section h1 {
  border: none;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: var(--adk-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  position: relative;
}

/* Override the generic h1::after for hero */
.hero-section h1::after {
  display: none;
}

.hero-section .hero-tagline {
  font-size: 1.15rem;
  color: var(--adk-text-muted);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
  position: relative;
  font-weight: 400;
}

/* ---- Hero stats ---- */

.hero-section .hero-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  position: relative;
}

.hero-section .hero-stat {
  text-align: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--adk-radius-md);
  background: var(--adk-glass-bg);
  backdrop-filter: var(--adk-glass-blur);
  -webkit-backdrop-filter: var(--adk-glass-blur);
  border: 1px solid var(--adk-glass-border);
  transition: all var(--adk-transition-slow);
  min-width: 100px;
}

.hero-section .hero-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--adk-shadow-md), var(--adk-shadow-glow);
}

.hero-section .hero-stat .stat-number {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--adk-accent);
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-section .hero-stat .stat-label {
  font-size: 0.68rem;
  color: var(--adk-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.4rem;
  font-weight: 700;
  display: block;
}

/* ---- Install snippet on hero ---- */

.hero-install {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--adk-glass-bg);
  backdrop-filter: var(--adk-glass-blur);
  -webkit-backdrop-filter: var(--adk-glass-blur);
  border: 1px solid var(--adk-glass-border);
  border-radius: var(--adk-radius-pill);
  padding: 0.55rem 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-stack--monospace);
  font-size: 0.85rem;
  color: var(--adk-text-muted);
  position: relative;
  box-shadow: var(--adk-shadow-sm);
  transition: all var(--adk-transition);
}

.hero-install:hover {
  box-shadow: var(--adk-shadow-md), var(--adk-shadow-glow);
  border-color: var(--adk-accent-lighter);
}

.hero-install code {
  background: none;
  color: var(--adk-accent);
  padding: 0;
  border: none;
  font-weight: 600;
}


/* ==========================================================================
   8. JOURNEY CARDS -- Learning Path
   ========================================================================== */

.journey-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin: 0.75rem 0;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg);
  transition: all var(--adk-duration-slow) var(--adk-ease);
  position: relative;
  background: var(--adk-surface-raised);
  border-left: 3px solid transparent;
}

.journey-step:hover {
  border-color: var(--adk-accent-light);
  border-left-color: var(--adk-accent);
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  transform: translateX(4px);
}

.journey-step::before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--adk-radius-md);
  background: var(--adk-gradient-brand);
  color: white;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.25);
  transition: all var(--adk-transition);
}

.journey-step:hover::before {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(230, 81, 0, 0.35);
}

[data-theme="dark"] .journey-step::before {
  box-shadow: 0 4px 12px rgba(255, 183, 77, 0.2);
}

.journey-step .journey-content h4 {
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  color: var(--color-foreground-primary);
}

.journey-step .journey-content h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--adk-transition);
}

.journey-step:hover .journey-content h4 a {
  color: var(--adk-accent);
}

.journey-step .journey-content p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--adk-text-muted);
  line-height: 1.6;
}

/* Connector line between journey steps */
.journey-step + .journey-step::after {
  content: "";
  position: absolute;
  left: 2.35rem;
  top: -0.75rem;
  width: 2px;
  height: 0.75rem;
  background: linear-gradient(to bottom, var(--adk-accent-lighter), var(--adk-accent));
  border-radius: 1px;
}


/* ==========================================================================
   9. API REFERENCE POLISH
   ========================================================================== */

/* ---- Method signatures in h4 ---- */

.content h4 code.docutils {
  font-family: var(--font-stack--monospace);
  font-size: 0.88em;
  font-weight: 600;
  color: var(--color-foreground-primary);
  background: none;
  padding: 0;
  border: none;
}

.content h4 code.docutils .pre:first-child {
  color: var(--adk-accent);
  font-weight: 700;
}

.content h4 code.docutils .pre:last-child {
  color: var(--adk-text-muted);
  font-weight: 400;
}

.content h3 + h4 {
  margin-top: 1.25rem;
}

/* ---- Badges ---- */

.sd-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18em 0.6em;
  border-radius: var(--adk-radius-pill);
  vertical-align: middle;
  text-transform: uppercase;
}

.sd-badge.sd-bg-success,
.sd-badge.sd-bg-success.sd-bg-text-success {
  background: var(--adk-success-bg) !important;
  color: var(--adk-success) !important;
  border: 1px solid currentColor;
}

.sd-badge.sd-bg-info,
.sd-badge.sd-bg-info.sd-bg-text-info {
  background: var(--adk-info-bg) !important;
  color: var(--adk-info) !important;
  border: 1px solid currentColor;
}

.sd-badge.sd-bg-primary,
.sd-badge.sd-bg-primary.sd-bg-text-primary {
  background: var(--adk-accent-bg) !important;
  color: var(--adk-accent) !important;
  border: 1px solid currentColor;
}

.sd-badge.sd-bg-warning,
.sd-badge.sd-bg-warning.sd-bg-text-warning {
  background: var(--adk-warning-bg) !important;
  color: var(--adk-warning) !important;
  border: 1px solid currentColor;
}

.sd-badge.sd-bg-danger,
.sd-badge.sd-bg-danger.sd-bg-text-danger {
  background: var(--adk-danger-bg) !important;
  color: var(--adk-danger) !important;
  border: 1px solid currentColor;
}

/* ---- Comparison table highlights ---- */

.comparison-winner {
  background: var(--adk-success-bg);
  font-weight: 700;
}

/* ---- Line count badges ---- */

.lines-badge {
  display: inline-block;
  background: var(--adk-gradient-brand);
  color: white;
  font-weight: 700;
  padding: 0.15em 0.65em;
  border-radius: var(--adk-radius-pill);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10. PREV/NEXT PAGE NAVIGATION
   ========================================================================== */

.related-pages {
  margin-top: var(--adk-section-gap);
  padding-top: 2rem;
  border-top: 1px solid var(--adk-border);
  display: flex;
  gap: 1rem;
}

.related-pages a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg);
  text-decoration: none;
  transition: all var(--adk-duration-slow) var(--adk-ease);
  background: var(--adk-surface-raised);
}

.related-pages a:hover {
  border-color: var(--adk-accent-light);
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  transform: translateY(-2px);
}

.related-pages a .page-info .context {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--adk-text-faint);
}

.related-pages a .page-info .title {
  font-weight: 600;
  color: var(--color-foreground-primary);
  font-size: 0.92rem;
  margin-top: 0.2rem;
  transition: color var(--adk-transition);
}

.related-pages a:hover .page-info .title {
  color: var(--adk-accent);
}

.related-pages .furo-related-icon {
  color: var(--adk-text-faint);
  transition: all var(--adk-transition);
  flex-shrink: 0;
}

.related-pages a:hover .furo-related-icon {
  color: var(--adk-accent);
  transform: translateX(2px);
}

.related-pages a:first-child:hover .furo-related-icon {
  transform: translateX(-2px);
}

.related-pages .prev-page .page-info {
  text-align: right;
}


/* ==========================================================================
   11. ANNOUNCEMENT BAR
   ========================================================================== */

.announcement {
  background: var(--adk-gradient-brand);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.55rem 1.25rem;
  letter-spacing: 0.01em;
}

.announcement a {
  font-weight: 700;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.announcement a:hover {
  opacity: 0.85;
}


/* ==========================================================================
   12. SEARCH & HIGHLIGHTING
   ========================================================================== */

.highlighted {
  background: rgba(251, 191, 36, 0.25);
  padding: 0.1em 0.25em;
  border-radius: 3px;
  border-bottom: 2px solid var(--adk-warning);
}

[data-theme="dark"] .highlighted {
  background: rgba(251, 191, 36, 0.15);
}

.search .context {
  font-size: 0.9rem;
  color: var(--adk-text-muted);
  line-height: 1.65;
}


/* ==========================================================================
   13. TABLE RESPONSIVENESS
   ========================================================================== */

.content .table-wrapper,
.content table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content table tbody td {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   14. SIDEBAR LOGO
   ========================================================================== */

.sidebar-brand {
  padding: 1.25rem 1rem;
}

.sidebar-logo {
  max-height: 2rem;
  width: auto;
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .hero-section {
    padding: 2.25rem 1.5rem;
    margin: 0 0 1.5rem 0;
    border-radius: var(--adk-radius-lg);
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .hero-section .hero-tagline {
    font-size: 1rem;
  }

  .hero-section .hero-stats {
    gap: 0.75rem;
  }

  .hero-section .hero-stat {
    min-width: 80px;
    padding: 0.5rem 0.75rem;
  }

  .hero-section .hero-stat .stat-number {
    font-size: 1.3rem;
  }

  .journey-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .journey-step + .journey-step::after {
    display: none;
  }

  .content table {
    font-size: 0.85rem;
  }

  .content table thead th,
  .content table tbody td {
    padding: 0.5rem 0.75rem;
  }

  .related-pages {
    flex-direction: column;
  }

  .related-pages .prev-page .page-info {
    text-align: left;
  }

  .content h1 {
    font-size: 1.6rem;
  }

  .content h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hero-section .hero-stats {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .hero-section .hero-stat {
    width: 100%;
    max-width: 200px;
  }
}


/* ==========================================================================
   16. PRINT
   ========================================================================== */

@media print {
  .reading-progress,
  .announcement {
    display: none;
  }

  .hero-section {
    background: none;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .hero-section::before,
  .hero-section::after {
    display: none;
  }

  .hero-section h1 {
    -webkit-text-fill-color: initial;
    color: #333;
  }

  .sd-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .content pre {
    box-shadow: none;
  }

  .content pre::before {
    display: none;
  }

  /* Hide language labels on mobile to avoid layout overflow */
  .content .highlight[class*="highlight-"]::before {
    display: none;
  }

  /* Keep copy button visible on mobile (touch-friendly) but always show it */
  .content pre .copybtn {
    opacity: 0.6;
  }

  .related-pages a {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}


/* ==========================================================================
   17. ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.sd-tab-set > label:focus-visible,
.sd-card:focus-visible {
  outline: 2px solid var(--adk-accent);
  outline-offset: 3px;
  border-radius: var(--adk-radius-xs);
}

[data-theme="dark"] .content blockquote p,
[data-theme="dark"] .journey-step .journey-content p {
  color: var(--adk-text-muted);
}

.skip-link:focus {
  background: var(--adk-accent);
  color: white;
  padding: 0.5rem 1rem;
  z-index: 10000;
  border-radius: var(--adk-radius-sm);
}


/* ==========================================================================
   18. DARK MODE REFINEMENTS
   ========================================================================== */

/* Section 18 dark mode refinements use tokens from the main dark block above */

[data-theme="dark"] .hero-section {
  border-color: var(--adk-border);
  box-shadow: var(--adk-shadow-lg), inset 0 1px 0 rgba(255, 183, 77, 0.05);
}

[data-theme="dark"] .mermaid {
  filter: none;
  background: transparent;
}

[data-theme="dark"] .announcement {
  background: linear-gradient(90deg, #BF360C, #E65100);
}

[data-theme="dark"] .sd-card {
  background: var(--adk-surface-raised);
  border-color: var(--adk-border);
}

[data-theme="dark"] .sd-card:hover {
  border-color: rgba(255, 183, 77, 0.3);
  box-shadow: var(--adk-shadow-lg), 0 0 0 1px rgba(255, 183, 77, 0.08), var(--adk-shadow-glow);
}

[data-theme="dark"] .content pre {
  border-color: var(--adk-border);
  background: var(--adk-surface-sunken);
}

[data-theme="dark"] .sd-tab-set {
  border-color: var(--adk-border);
  background: var(--adk-surface-raised);
}

[data-theme="dark"] .journey-step {
  background: var(--adk-surface-raised);
  border-color: var(--adk-border);
}

[data-theme="dark"] .journey-step:hover {
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
}

[data-theme="dark"] .related-pages a {
  background: var(--adk-surface-raised);
  border-color: var(--adk-border);
}

[data-theme="dark"] .related-pages a:hover {
  border-color: rgba(255, 183, 77, 0.3);
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
}

[data-theme="dark"] .content blockquote {
  background: var(--adk-surface-raised);
  border-left-color: var(--adk-accent);
}

/* Dark mode admonitions */
[data-theme="dark"] .admonition {
  border-color: var(--adk-border);
}

[data-theme="dark"] .admonition.important,
[data-theme="dark"] .admonition.note {
  background: var(--adk-accent-bg);
  border-color: rgba(255, 183, 77, 0.2);
}

[data-theme="dark"] .admonition.tip,
[data-theme="dark"] .admonition.hint {
  background: var(--adk-success-bg);
  border-color: var(--adk-success-border);
}

[data-theme="dark"] .admonition.warning,
[data-theme="dark"] .admonition.caution {
  background: var(--adk-warning-bg);
  border-color: var(--adk-warning-border);
}

[data-theme="dark"] .admonition.danger,
[data-theme="dark"] .admonition.error {
  background: var(--adk-danger-bg);
  border-color: var(--adk-danger-border);
}

/* Dark mode table zebra striping */
[data-theme="dark"] .content table tbody tr:nth-child(even) {
  background: var(--adk-surface-raised);
}

[data-theme="dark"] .content table tbody tr:hover {
  background: var(--adk-accent-bg);
}

[data-theme="dark"] .content table thead th {
  background: var(--adk-surface-sunken);
  border-bottom-color: var(--adk-accent);
  color: var(--adk-text-secondary);
}

/* Dark mode link underlines */
[data-theme="dark"] .content a:not(.sd-card):not(.headerlink) {
  text-decoration-color: rgba(255, 183, 77, 0.3);
}

[data-theme="dark"] .content a:not(.sd-card):not(.headerlink):hover {
  text-decoration-color: var(--adk-accent);
}

/* Dark mode tab sets */
[data-theme="dark"] .sd-tab-set > label:hover {
  background: var(--adk-accent-bg);
}

[data-theme="dark"] .sd-tab-set > input:checked + label {
  background: var(--adk-accent-bg);
  border-bottom-color: var(--adk-accent);
  color: var(--adk-accent);
}


/* ==========================================================================
   19. HERO ARCHITECTURE DIAGRAM
   ========================================================================== */

.hero-diagram {
  max-width: 640px;
  margin: 1.75rem auto 0.5rem;
  position: relative;
}

.hero-flow-svg {
  width: 100%;
  height: auto;
}

.hero-node {
  opacity: 0;
  animation: heroFadeSlide 0.6s var(--adk-ease-out) forwards;
  animation-delay: var(--delay, 0s);
}

.hero-arrow {
  opacity: 0;
  animation: heroFadeIn 0.4s var(--adk-ease-out) forwards;
  animation-delay: var(--delay, 0s);
}

.hero-label {
  opacity: 0;
  animation: heroFadeIn 0.4s var(--adk-ease-out) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes heroFadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-node,
  .hero-arrow,
  .hero-label {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 768px) {
  .hero-diagram {
    max-width: 100%;
    margin: 1rem auto 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero-flow-svg {
    min-width: 480px;
  }
}


/* ==========================================================================
   20. VISUAL REFERENCE CARDS (User Guide)
   ========================================================================== */

.visual-ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.visual-ref-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg);
  background: var(--adk-surface-raised);
  transition: all var(--adk-duration-slow) var(--adk-ease);
  position: relative;
  overflow: hidden;
  border-left: 3px solid transparent;
}

.visual-ref-card:hover {
  border-color: var(--adk-accent-light);
  border-left-color: var(--adk-accent);
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  transform: translateX(4px);
}

[data-theme="dark"] .visual-ref-card {
  background: var(--adk-surface-raised);
}

[data-theme="dark"] .visual-ref-card:hover {
  border-color: rgba(255, 183, 77, 0.3);
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
}

.visual-ref-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--adk-accent);
  position: relative;
}

.visual-ref-content {
  flex: 1;
  min-width: 0;
  position: relative;
}

.visual-ref-content h4 {
  margin: 0 0 0.35rem 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.visual-ref-content h4 a {
  color: var(--color-foreground-primary);
  text-decoration: none;
  transition: color var(--adk-transition);
}

.visual-ref-card:hover h4 a {
  color: var(--adk-accent);
}

.visual-ref-content p {
  margin: 0 0 0.6rem 0;
  font-size: 0.85rem;
  color: var(--adk-text-muted);
  line-height: 1.55;
}

.visual-ref-content p code {
  font-size: 0.82em;
}

.visual-ref-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vr-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border-radius: var(--adk-radius-pill);
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-color) 25%, transparent);
}

@media (max-width: 768px) {
  .visual-ref-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .visual-ref-tags {
    justify-content: center;
  }
}


/* ==========================================================================
   21. ARCHITECTURE DIAGRAMS (inline SVGs in content)
   ========================================================================== */

.arch-diagram-wrapper {
  margin: 1.75rem 0;
  padding: 1.5rem;
  border: 1px solid var(--adk-border);
  border-radius: var(--adk-radius-lg);
  background: var(--adk-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transition: all var(--adk-transition-slow);
}

.arch-diagram {
  width: 100%;
  height: auto;
  min-width: 500px;
}

[data-theme="dark"] .arch-diagram-wrapper {
  background: var(--adk-surface-sunken);
  border-color: var(--adk-border);
}

.arch-diagram-wrapper:hover {
  border-color: var(--adk-border-hover);
  box-shadow: var(--adk-shadow-md);
}

/* Diagram entrance animation (triggered by IntersectionObserver in custom.js).
   Fallback: if JS fails or observer doesn't fire, diagrams become visible
   after a short CSS-only delay so content is never permanently hidden. */
.arch-diagram-wrapper {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  animation: diagram-fallback-reveal 0s 1.5s forwards;
}

@keyframes diagram-fallback-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.arch-diagram-wrapper.diagram-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .arch-diagram-wrapper {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ==========================================================================
   22. PREMIUM MICRO-INTERACTIONS
   ========================================================================== */

/* Hero title entrance */
.hero-section h1 {
  animation: heroTitleIn 0.7s var(--adk-ease-out) both;
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-section .hero-tagline {
  animation: heroSubIn 0.7s var(--adk-ease-out) 0.1s both;
}

@keyframes heroSubIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-install {
  animation: heroSubIn 0.7s var(--adk-ease-out) 0.2s both;
}

.hero-stats {
  animation: heroSubIn 0.7s var(--adk-ease-out) 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-section h1,
  .hero-section .hero-tagline,
  .hero-install,
  .hero-stats {
    animation: none;
  }
}

/* Stat counter hover */
.hero-stat .stat-number {
  transition: all 0.3s var(--adk-ease);
}

.hero-stat:hover .stat-number {
  text-shadow: 0 0 24px color-mix(in srgb, var(--adk-accent) 40%, transparent);
  transform: scale(1.05);
}

/* Card shimmer on hover */
.sd-card {
  position: relative;
  overflow: hidden;
}

.sd-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(230, 81, 0, 0.025) 45%,
    rgba(230, 81, 0, 0.05) 50%,
    rgba(230, 81, 0, 0.025) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--adk-ease);
  pointer-events: none;
}

.sd-card:hover::after {
  transform: translateX(100%);
}

[data-theme="dark"] .sd-card::after {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 183, 77, 0.03) 45%,
    rgba(255, 183, 77, 0.06) 50%,
    rgba(255, 183, 77, 0.03) 55%,
    transparent 60%
  );
}

/* Inline code subtle hover */
.content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code):hover {
  background: var(--adk-accent-bg-hover);
}

/* Admonition entrance */
.admonition {
  animation: admonitionIn 0.35s var(--adk-ease-out) both;
}

@keyframes admonitionIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .admonition {
    animation: none;
  }
}


/* ==========================================================================
   23. TYPOGRAPHY REFINEMENTS
   ========================================================================== */

/* First paragraph after h2 */
.content h2 + p {
  font-size: 1.02em;
  color: var(--adk-text-secondary);
}

/* Section dividers -- gradient fade */
.content h2 {
  border-image: linear-gradient(90deg, var(--adk-border) 0%, transparent 100%) 1;
}

.content h2:hover {
  border-image: linear-gradient(90deg, var(--adk-accent), var(--adk-accent-light), transparent) 1;
}

/* Content links hover */
.content a:not(.sd-card):not(.headerlink):hover {
  text-decoration-color: var(--adk-accent);
}

/* HR dividers */
.content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--adk-border), transparent);
  margin: var(--adk-section-gap) 0;
}


/* ==========================================================================
   24. FOOTER POLISH
   ========================================================================== */

.bottom-of-page a svg {
  transition: all 0.2s var(--adk-ease);
}

.bottom-of-page a:hover svg {
  filter: drop-shadow(0 0 8px var(--adk-accent));
  color: var(--adk-accent);
  transform: scale(1.1);
}


/* ==========================================================================
   25. DECISION GUIDE & FLOWCHART STYLING
   ========================================================================== */

.content pre:has(code:not([class])) {
  background: var(--adk-surface);
}

.content pre:has(code:not([class]))::before {
  display: none;
}


/* ==========================================================================
   26. COOKBOOK GRID POLISH
   ========================================================================== */

.sd-row > .sd-col {
  transition: transform 0.2s var(--adk-ease);
}

.sd-card .sd-card-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--adk-text-secondary);
}

/* Grid gutter adjustments for better breathing room */
.sd-row.sd-g-3 > .sd-col {
  padding: 0.75rem;
}


/* ==========================================================================
   27. SCROLLBAR STYLING
   ========================================================================== */

/* Webkit scrollbar for code blocks */
.content pre::-webkit-scrollbar {
  height: 6px;
}

.content pre::-webkit-scrollbar-track {
  background: transparent;
}

.content pre::-webkit-scrollbar-thumb {
  background: var(--adk-border);
  border-radius: 3px;
}

.content pre::-webkit-scrollbar-thumb:hover {
  background: var(--adk-border-hover);
}

/* Sidebar scrollbar */
.sidebar-drawer::-webkit-scrollbar {
  width: 4px;
}

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

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

.sidebar-drawer::-webkit-scrollbar-thumb:hover {
  background: var(--adk-border-hover);
}


/* ==========================================================================
   28. SELECTION STYLING
   ========================================================================== */

::selection {
  background: color-mix(in srgb, var(--adk-accent) 18%, transparent);
  color: inherit;
}


/* ==========================================================================
   29. CONTENT SPACING & RHYTHM
   ========================================================================== */

/* Better vertical rhythm between major sections */
.content > .section + .section,
.content > section + section {
  margin-top: var(--adk-section-gap);
}

/* Tighter spacing for nested list items */
.content li > ul,
.content li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Breathing room for content */
.content {
  max-width: 52rem;
}

/* Last element in card body -- remove bottom margin */
.sd-card .sd-card-body > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   30. BADGE ROW (landing page)
   ========================================================================== */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 2rem 0;
  justify-content: center;
}

.badges img {
  height: 20px;
}

.badges a {
  text-decoration: none;
  border: none;
}

.badges a:hover {
  text-decoration: none;
  opacity: 0.85;
}


/* ==========================================================================
   31. VERSION INDICATOR
   ========================================================================== */

.sidebar-brand-text {
  font-weight: 700;
}


/* ==========================================================================
   32. FEATURE CARDS (landing page inline HTML)
   ========================================================================== */

/* Hover lift for the inline feature cards on the landing page */
.content div[style*="grid-template-columns"] > div:hover {
  border-color: var(--adk-accent-light) !important;
  box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  transform: translateY(-3px);
}

/* Feature card h3 inherits foreground in dark mode */
.content div[style*="grid-template-columns"] > div h3 {
  color: var(--adk-text-primary);
}

/* Dark mode: brighten inline SVG strokes/fills in feature cards */
[data-theme="dark"] .content div[style*="grid-template-columns"] svg rect[stroke="#E65100"] { stroke: #FFB74D; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg rect[fill="#E6510010"] { fill: rgba(255, 183, 77, 0.08); }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg path[fill="#E65100"] { fill: #FFB74D; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg path[fill="#F57C00"] { fill: #FFCC80; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[stroke="#E65100"] { stroke: #FFB74D; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[fill="#E6510010"] { fill: rgba(255, 183, 77, 0.08); }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[stroke="#F57C00"] { stroke: #FFCC80; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[fill="#F57C0010"] { fill: rgba(255, 204, 128, 0.08); }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[stroke="#FFB74D"] { stroke: #FFE0B2; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[fill="#FFB74D10"] { fill: rgba(255, 224, 178, 0.08); }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg line[stroke="#F57C00"] { stroke: #FFCC80; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg line[stroke="#FFB74D"] { stroke: #FFE0B2; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg text[fill="#E65100"] { fill: #FFB74D; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg text[fill="#F57C00"] { fill: #FFCC80; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg text[fill="#FFB74D"] { fill: #FFE0B2; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg rect[fill="#E0E0E0"] { fill: #4A4A4A; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg path[stroke="#10b981"] { stroke: #34d399; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg circle[fill="#F57C00"] { fill: #FFCC80; }
[data-theme="dark"] .content div[style*="grid-template-columns"] svg path[stroke="#E65100"] { stroke: #FFB74D; }

/* Octicon icons in grid cards (sphinx-design) */
.sd-card .sd-card-title .sd-octicon {
  color: var(--adk-accent);
  vertical-align: middle;
}


/* ==========================================================================
   33. LANDING PAGE FOOTER LINKS
   ========================================================================== */

.content hr + p {
  text-align: center;
  font-size: 0.9rem;
  color: var(--adk-text-muted);
}

.content hr + p a {
  color: var(--adk-accent);
  text-decoration: none;
  font-weight: 500;
}

.content hr + p a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   AUTO DARK MODE — System preference support
   Mirrors all [data-theme="dark"] rules for when Furo theme is "auto"
   and the OS prefers dark. Without this, custom dark-mode styles only
   apply when the user explicitly clicks the dark toggle.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Dark tokens for auto-theme system preference */
  :root:not([data-theme="light"]) {
    --adk-accent: #FFB74D;
    --adk-accent-hover: #FFCC80;
    --adk-accent-light: #FFCC80;
    --adk-accent-lighter: #FFE0B2;
    --adk-accent-lightest: #FFF3E0;
    --adk-accent-bg: rgba(255, 183, 77, 0.12);
    --adk-accent-bg-hover: rgba(255, 183, 77, 0.2);
    --adk-success: #34d399;
    --adk-success-bg: rgba(52, 211, 153, 0.12);
    --adk-success-border: rgba(52, 211, 153, 0.28);
    --adk-warning: #fbbf24;
    --adk-warning-bg: rgba(251, 191, 36, 0.12);
    --adk-warning-border: rgba(251, 191, 36, 0.28);
    --adk-danger: #f87171;
    --adk-danger-bg: rgba(248, 113, 113, 0.12);
    --adk-danger-border: rgba(248, 113, 113, 0.28);
    --adk-info: #38bdf8;
    --adk-info-bg: rgba(56, 189, 248, 0.12);
    --adk-info-border: rgba(56, 189, 248, 0.28);
    --adk-surface: #171717;
    --adk-surface-raised: #1E1E1E;
    --adk-surface-sunken: #121212;
    --adk-border: #333333;
    --adk-border-hover: #4A4A4A;
    --adk-border-subtle: #252525;
    --adk-text-primary: #E0E0E0;
    --adk-text-secondary: #BDBDBD;
    --adk-text-muted: #9E9E9E;
    --adk-text-faint: #757575;
    --adk-gradient-start: #FFB74D;
    --adk-gradient-mid: #FFCC80;
    --adk-gradient-end: #FFE0B2;
    --adk-gradient-brand: linear-gradient(135deg, #FFB74D, #FFCC80, #FFE0B2);
    --adk-gradient-subtle: linear-gradient(135deg, rgba(255, 183, 77, 0.08) 0%, rgba(255, 204, 128, 0.05) 50%, rgba(255, 224, 178, 0.03) 100%);
    --adk-hero-bg: linear-gradient(135deg, rgba(255, 183, 77, 0.1) 0%, rgba(255, 152, 0, 0.06) 50%, rgba(255, 183, 77, 0.03) 100%);
    --adk-glass-bg: rgba(23, 23, 23, 0.8);
    --adk-glass-border: rgba(255, 183, 77, 0.12);
    --adk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --adk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --adk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --adk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
    --adk-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
    --adk-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
    --adk-shadow-glow: 0 0 24px rgba(255, 183, 77, 0.15);
    --adk-shadow-glow-lg: 0 0 48px rgba(255, 183, 77, 0.2);
  }

  body:not([data-theme="light"]) .mermaid {
    filter: none;
  }

  body:not([data-theme="light"]) .content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code) {
    background: rgba(255, 183, 77, 0.1);
    color: var(--adk-accent-lighter);
    border-color: rgba(255, 183, 77, 0.15);
  }

  body:not([data-theme="light"]) .content code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code):hover {
    background: rgba(255, 183, 77, 0.18);
    border-color: rgba(255, 183, 77, 0.3);
  }

  body:not([data-theme="light"]) .content table thead th {
    background: rgba(255, 183, 77, 0.06);
  }

  body:not([data-theme="light"]) .hero-section::before {
    background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 183, 77, 0.06) 1px,
      transparent 0
    );
  }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#9E9E9E"] { fill: #BDBDBD; }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#757575"] { fill: #9E9E9E; }

  body:not([data-theme="light"]) .hero-flow-svg rect[stroke="#E65100"] { stroke: #FFB74D; }

  body:not([data-theme="light"]) .hero-flow-svg rect[fill="#E6510008"] { fill: rgba(255, 183, 77, 0.06); }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#F57C00"] { fill: #FFCC80; }

  body:not([data-theme="light"]) .hero-flow-svg rect[stroke="#F57C00"] { stroke: #FFCC80; }

  body:not([data-theme="light"]) .hero-flow-svg rect[fill="#F57C0008"] { fill: rgba(255, 204, 128, 0.06); }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#FFB74D"] { fill: #FFE0B2; }

  body:not([data-theme="light"]) .hero-flow-svg line[stroke="#F57C00"] { stroke: #FFCC80; }

  body:not([data-theme="light"]) .hero-flow-svg line[stroke="#10b981"] { stroke: #34d399; }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#34d399"] { fill: #6ee7b7; }

  body:not([data-theme="light"]) .hero-flow-svg text[fill="#fbbf24"] { fill: #fde68a; }

  body:not([data-theme="light"]) .hero-flow-svg rect[stroke="#10b981"] { stroke: #34d399; }

  body:not([data-theme="light"]) .hero-flow-svg rect[fill="#10b98108"] { fill: rgba(52, 211, 153, 0.06); }

  body:not([data-theme="light"]) .hero-flow-svg rect[stroke="#f59e0b"] { stroke: #fbbf24; }

  body:not([data-theme="light"]) .hero-flow-svg rect[fill="#f59e0b06"] { fill: rgba(251, 191, 36, 0.06); }

  body:not([data-theme="light"]) .hero-flow-svg path[fill="#F57C00"] { fill: #FFCC80; }

  body:not([data-theme="light"]) .journey-step::before {
    box-shadow: 0 4px 12px rgba(255, 183, 77, 0.2);
  }

  body:not([data-theme="light"]) .highlighted {
    background: rgba(251, 191, 36, 0.15);
  }

  body:not([data-theme="light"]) .content blockquote p,

  body:not([data-theme="light"]) .journey-step .journey-content p {
    color: var(--adk-text-muted);
  }

  body:not([data-theme="light"]) .hero-section {
    border-color: var(--adk-border);
    box-shadow: var(--adk-shadow-lg), inset 0 1px 0 rgba(255, 183, 77, 0.05);
  }

  body:not([data-theme="light"]) .mermaid {
    filter: none;
    background: transparent;
  }

  body:not([data-theme="light"]) .announcement {
    background: linear-gradient(90deg, #BF360C, #E65100);
  }

  body:not([data-theme="light"]) .sd-card {
    background: var(--adk-surface-raised);
    border-color: var(--adk-border);
  }

  body:not([data-theme="light"]) .sd-card:hover {
    border-color: rgba(255, 183, 77, 0.3);
    box-shadow: var(--adk-shadow-lg), 0 0 0 1px rgba(255, 183, 77, 0.08), var(--adk-shadow-glow);
  }

  body:not([data-theme="light"]) .content pre {
    border-color: var(--adk-border);
    background: var(--adk-surface-sunken);
  }

  body:not([data-theme="light"]) .sd-tab-set {
    border-color: var(--adk-border);
    background: var(--adk-surface-raised);
  }

  body:not([data-theme="light"]) .journey-step {
    background: var(--adk-surface-raised);
    border-color: var(--adk-border);
  }

  body:not([data-theme="light"]) .journey-step:hover {
    box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  }

  body:not([data-theme="light"]) .related-pages a {
    background: var(--adk-surface-raised);
    border-color: var(--adk-border);
  }

  body:not([data-theme="light"]) .related-pages a:hover {
    border-color: rgba(255, 183, 77, 0.3);
    box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  }

  body:not([data-theme="light"]) .content blockquote {
    background: var(--adk-surface-raised);
    border-left-color: var(--adk-accent);
  }

  body:not([data-theme="light"]) .admonition {
    border-color: var(--adk-border);
  }

  body:not([data-theme="light"]) .admonition.important,

  body:not([data-theme="light"]) .admonition.note {
    background: var(--adk-accent-bg);
    border-color: rgba(255, 183, 77, 0.2);
  }

  body:not([data-theme="light"]) .admonition.tip,

  body:not([data-theme="light"]) .admonition.hint {
    background: var(--adk-success-bg);
    border-color: var(--adk-success-border);
  }

  body:not([data-theme="light"]) .admonition.warning,

  body:not([data-theme="light"]) .admonition.caution {
    background: var(--adk-warning-bg);
    border-color: var(--adk-warning-border);
  }

  body:not([data-theme="light"]) .admonition.danger,

  body:not([data-theme="light"]) .admonition.error {
    background: var(--adk-danger-bg);
    border-color: var(--adk-danger-border);
  }

  body:not([data-theme="light"]) .content table tbody tr:nth-child(even) {
    background: var(--adk-surface-raised);
  }

  body:not([data-theme="light"]) .content table tbody tr:hover {
    background: var(--adk-accent-bg);
  }

  body:not([data-theme="light"]) .content table thead th {
    background: var(--adk-surface-sunken);
    border-bottom-color: var(--adk-accent);
    color: var(--adk-text-secondary);
  }

  body:not([data-theme="light"]) .content a:not(.sd-card):not(.headerlink) {
    text-decoration-color: rgba(255, 183, 77, 0.3);
  }

  body:not([data-theme="light"]) .content a:not(.sd-card):not(.headerlink):hover {
    text-decoration-color: var(--adk-accent);
  }

  body:not([data-theme="light"]) .sd-tab-set > label:hover {
    background: var(--adk-accent-bg);
  }

  body:not([data-theme="light"]) .sd-tab-set > input:checked + label {
    background: var(--adk-accent-bg);
    border-bottom-color: var(--adk-accent);
    color: var(--adk-accent);
  }

  body:not([data-theme="light"]) .visual-ref-card {
    background: var(--adk-surface-raised);
  }

  body:not([data-theme="light"]) .visual-ref-card:hover {
    border-color: rgba(255, 183, 77, 0.3);
    box-shadow: var(--adk-shadow-lg), var(--adk-shadow-glow);
  }

  body:not([data-theme="light"]) .arch-diagram-wrapper {
    background: var(--adk-surface-sunken);
    border-color: var(--adk-border);
  }

  body:not([data-theme="light"]) .sd-card::after {
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 183, 77, 0.03) 45%,
      rgba(255, 183, 77, 0.06) 50%,
      rgba(255, 183, 77, 0.03) 55%,
      transparent 60%
    );
  }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg rect[stroke="#E65100"] { stroke: #FFB74D; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg rect[fill="#E6510010"] { fill: rgba(255, 183, 77, 0.08); }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg path[fill="#E65100"] { fill: #FFB74D; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg path[fill="#F57C00"] { fill: #FFCC80; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[stroke="#E65100"] { stroke: #FFB74D; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[fill="#E6510010"] { fill: rgba(255, 183, 77, 0.08); }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[stroke="#F57C00"] { stroke: #FFCC80; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[fill="#F57C0010"] { fill: rgba(255, 204, 128, 0.08); }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[stroke="#FFB74D"] { stroke: #FFE0B2; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[fill="#FFB74D10"] { fill: rgba(255, 224, 178, 0.08); }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg line[stroke="#F57C00"] { stroke: #FFCC80; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg line[stroke="#FFB74D"] { stroke: #FFE0B2; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg text[fill="#E65100"] { fill: #FFB74D; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg text[fill="#F57C00"] { fill: #FFCC80; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg text[fill="#FFB74D"] { fill: #FFE0B2; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg rect[fill="#E0E0E0"] { fill: #4A4A4A; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg path[stroke="#10b981"] { stroke: #34d399; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg circle[fill="#F57C00"] { fill: #FFCC80; }

  body:not([data-theme="light"]) .content div[style*="grid-template-columns"] svg path[stroke="#E65100"] { stroke: #FFB74D; }

}


/* ==========================================================================
   28. PATHWAY CARDS — Three Pathways (Pipeline / Skills / Harness)
   ========================================================================== */

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.pathway-card {
  border: 2px solid var(--pw-color, var(--adk-border));
  border-radius: var(--adk-radius-lg, 14px);
  padding: 1.5rem;
  background: color-mix(in srgb, var(--pw-color, #888) 3%, transparent);
  transition: all 0.3s ease;
}

.pathway-card:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--pw-color) 15%, transparent);
  transform: translateY(-2px);
}

.pathway-card--pipeline { --pw-color: #10b981; }
.pathway-card--skills   { --pw-color: #E65100; }
.pathway-card--harness  { --pw-color: #0ea5e9; }

.pathway-card .pathway-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pathway-card .pathway-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--pw-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--pw-color) 6%, transparent);
  color: var(--pw-color);
  font-family: var(--font-stack--monospace, monospace);
  font-size: 14px;
  font-weight: 700;
}

.pathway-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pw-color);
}

.pathway-card .pathway-subtitle {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.pathway-card .pathway-desc {
  font-size: 0.82rem;
  color: var(--adk-text-muted, #757575);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.pathway-card .pathway-code {
  font-size: 0.78rem;
  color: var(--pw-color);
  font-family: var(--font-stack--monospace, monospace);
}

.pathway-card .pathway-best-for {
  margin-top: 1rem;
  font-size: 0.82rem;
}

.pathway-card .pathway-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--pw-color);
  text-decoration: none;
}

.pathway-card .pathway-link:hover {
  text-decoration: underline;
}

/* Compact variant for user-guide/index.md */
.pathway-grid--compact {
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.pathway-grid--compact .pathway-card {
  border-width: 0;
  border-left: 3px solid var(--pw-color);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
}

/* Feature cards — "Why adk-fluent?" section */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  border: 1px solid var(--adk-border, #e0e0e0);
  border-radius: var(--adk-radius-lg, 14px);
  padding: 1.5rem;
  background: var(--adk-surface-raised, #fafafa);
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: var(--adk-accent-light, #FFB74D);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.feature-card .feature-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.feature-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.feature-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--adk-text-muted, #757575);
  line-height: 1.6;
}

/* Dark mode adjustments for pathway & feature cards */
[data-theme="dark"] .pathway-card {
  background: color-mix(in srgb, var(--pw-color) 5%, #171717);
}

[data-theme="dark"] .feature-card {
  background: var(--adk-surface-raised, #1e1e1e);
}

/* Responsive: stack on tablet and mobile */
@media (max-width: 900px) {
  .pathway-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   29. CONCEPT DIAGRAMS — Architecture & Concepts page
   ========================================================================== */

.concept-diagram {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--adk-border, #e0e0e0);
  border-radius: var(--adk-radius-lg, 14px);
  background: var(--adk-surface, #fff);
}

[data-theme="dark"] .concept-diagram {
  background: var(--adk-surface-sunken, #141414);
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.channel-card {
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--ch-color, var(--adk-border));
  background: color-mix(in srgb, var(--ch-color, #888) 4%, transparent);
}

.channel-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  color: var(--ch-color);
}

.channel-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--adk-text-muted, #757575);
}

.channel-card code {
  font-size: 0.8em;
}

.channel-card--history  { --ch-color: #e94560; }
.channel-card--state    { --ch-color: #0ea5e9; }
.channel-card--template { --ch-color: #10b981; }

@media (max-width: 900px) {
  .channel-grid {
    grid-template-columns: 1fr;
  }
}