/* ================================================================================
   SIGNALPILOT DOCS - CONSOLIDATED STYLES
   Combines: extra.css, brand.css, aurora.css, interactive-code.css
   Optimized for performance and maintainability
   CACHE BUST: v2024-11-06-22:45-MOBILE-NAV-FLOW-FIX
   ================================================================================ */

/* NOTE: Mermaid diagram styles moved to page-specific <style> blocks */
/* See ref-comparison/index.html for page-specific diagram styling */

/* ========================================
   0. GLOBAL BOX MODEL NORMALIZATION
   ======================================== */

/* Ensure consistent box-sizing across all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* CRITICAL: NO overflow constraints on html/body - breaks position: sticky! */
/* Use width constraints instead to prevent horizontal scroll */
html {
  height: auto !important;
  min-height: 100% !important;
  width: 100%;
  max-width: 100vw !important;
  overflow-x: visible !important; /* Override main.css - sticky fix */
}

body {
  height: auto !important;
  min-height: 100vh !important;
  width: 100%;
  max-width: 100vw !important;
  position: relative;
}

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

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   1. FONTS & BRAND VARIABLES
   ======================================== */

/* Import fonts - consolidated to reduce requests */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&family=Gugi&display=swap");

:root {
  /* Typography */
  --md-text-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --sp-heading-font: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --sp-brand-font: "Gugi", "Space Grotesk", system-ui, sans-serif;

  /* Aurora background */
  --sp-bg: #05070d;
  --sp-grad: radial-gradient(1200px 700px at -6% -8%, rgba(130,185,255,.18), transparent 60%),
             radial-gradient(1100px 660px at 108% -10%, rgba(155,140,255,.18), transparent 62%),
             radial-gradient(1200px 700px at 52% 118%, rgba(118,221,255,.12), transparent 64%);

  /* Card system */
  --sp-card-bg: var(--md-default-bg-color);
  --sp-card-border: rgba(255,255,255,0.08);
  --sp-card-radius: 0.75rem;
  --sp-card-gap: 1rem;
}

/* ========================================
   2. LIGHT MODE COLOR SCHEME
   ======================================== */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #0f1524;
  --md-primary-fg-color: #345CFF;
  --md-primary-fg-color--light: #5B8AFF;
  --md-primary-fg-color--dark: #203057;
  --md-accent-fg-color: #0aa1d5;
  --md-typeset-a-color: #0aa1d5;
  --bg: #ffffff;
  --text: #0f1524;
  --muted: #475569;
}

/* Light mode text colors */
[data-md-color-scheme="default"] .md-typeset,
[data-md-color-scheme="default"] .md-content {
  color: #0f1524;
}

[data-md-color-scheme="default"] a,
[data-md-color-scheme="default"] .md-typeset a {
  color: #0aa1d5;
}

/* Light mode backgrounds */
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-content {
  background: #ffffff;
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > * {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="default"] .md-typeset pre,
[data-md-color-scheme="default"] .md-typeset code {
  background: #f1f5f9;
  color: #0f1524;
}

[data-md-color-scheme="default"] .md-typeset code:not(pre code) {
  background: #e2e8f0;
  padding: 0.1em 0.4em;
}

/* Light mode tables */
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

/* ========================================
   3. DARK MODE COLOR SCHEME (WCAG AAA)
   ======================================== */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: transparent;
  --md-default-fg-color: #f0f4ff;  /* WCAG AAA compliant */
  --md-primary-fg-color: #6b9aff;  /* WCAG AAA compliant */
  --md-primary-fg-color--light: #8babff;
  --md-primary-fg-color--dark: #4b68ff;
  --md-accent-fg-color: #86edff;  /* Improved visibility */
  --bg: #0a0f1e;
  --text: #f0f4ff;
  --muted: #94a3b8;
}

/* Dark mode text ensuring readability */
[data-md-color-scheme="slate"] .md-typeset,
[data-md-color-scheme="slate"] .md-content {
  color: #f0f4ff;
}

/* Dark mode cards */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > * {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  backdrop-filter: blur(12px);
}

/* ========================================
   4. AURORA BACKGROUND (Dark Mode Only)
   ======================================== */

body {
  background: var(--sp-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sp-grad);
}

.sp-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sp-aurora .layer {
  position: absolute;
  inset: -10%;
  filter: blur(60px) saturate(130%) brightness(110%);
  mix-blend-mode: screen;
  opacity: 0.82;
  background:
    radial-gradient(45% 35% at 12% 12%, rgba(125,200,255,.40), transparent 62%),
    radial-gradient(36% 28% at 85% 14%, rgba(155,140,255,.38), transparent 65%),
    radial-gradient(48% 36% at 78% 88%, rgba(118,221,255,.28), transparent 70%),
    radial-gradient(26% 22% at 8% 72%, rgba(151,124,255,.22), transparent 66%);
  animation: auroraDrift 36s linear infinite alternate;
}

@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to { transform: translate3d(2%, 1%, 0) scale(1.05); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sp-aurora .layer {
    animation: none;
  }
  .sp-aurora {
    opacity: 0.5;
  }
  body::before {
    background: radial-gradient(1200px 700px at 50% 50%, rgba(130,185,255,.12), transparent 70%);
  }
}

/* Z-INDEX STACKING ORDER - Systematic layering
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   -1: Aurora background effects
    0: Aurora animated layers
    1: Main content, header, footer
    2: Sticky table elements
    3: Sticky table headers (higher than columns)
   10: Top navigation bar (always on top)
   50: Material header search/drawer overlays
  100: Drawer overlay backdrop (behind drawer)
  200: Navigation drawer sidebar (must be above overlay to be clickable!)
  300: Modals and dialogs
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Ensure UI stays above background */
.md-header,
.md-container,
.md-footer {
  position: relative;
  z-index: 1;
  max-width: 100vw !important;
}

.md-main {
  background: transparent;
  position: relative;
  z-index: 1;
  max-width: 100vw !important;
  /* NO overflow here - breaks sticky positioning for child sidebars! */
}

/* Ensure proper layering of navigation components */
.md-header {
  z-index: 50 !important; /* Material header above content */
  margin-top: 0 !important; /* No gap between headers */
  /* Match SignalPilot brand bar background */
  background: linear-gradient(135deg, rgba(52, 92, 255, 0.95), rgba(10, 161, 213, 0.95)) !important;
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* CRITICAL FIX: Prevent header ellipsis from blocking mouse wheel events */
.md-header__ellipsis {
  pointer-events: none !important; /* Don't capture mouse events - was blocking scrolling! */
}

/* Allow child elements of header ellipsis to still be clickable */
.md-header__ellipsis > * {
  pointer-events: auto !important;
}

/* Apply Gugi brand font to MkDocs header title */
.md-header__title,
.md-header__topic {
  font-family: var(--sp-brand-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 400 !important;
}

.md-sidebar {
  z-index: 200 !important; /* Drawer must be ABOVE overlay to be clickable */
}

/* BOTTOM SHEET MOBILE NAVIGATION: Modern, polished, ACTUALLY WORKS */
@media screen and (max-width: 76.24em) {

  /* ============================================
     BOTTOM SHEET CONTAINER - FIXED POSITIONING
     ============================================ */

  .md-sidebar--primary {
    /* Fixed to bottom of screen, full width */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;

    /* Taller height - 85vh so you can actually see content */
    height: 85vh !important;
    max-height: 85vh !important;

    /* Modern styling */
    background-color: var(--md-default-bg-color) !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2) !important;

    /* Z-index above overlay */
    z-index: 200 !important;

    /* NO overflow on container - scrolling happens inside */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Smooth slide animation */
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
  }

  /* HIDDEN: Slide down off-screen */
  #__drawer:not(:checked) ~ .md-container .md-sidebar--primary {
    transform: translateY(100%) translateZ(0) !important;
  }

  /* VISIBLE: Slide up into view */
  #__drawer:checked ~ .md-container .md-sidebar--primary {
    transform: translateY(0) translateZ(0) !important;
  }

  /* Scrollable content wrapper - THIS is where scrolling happens */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    /* Full height, proper scrolling */
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* Styling */
    background-color: transparent !important;
    padding: 2rem 1.25rem !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
  }

  /* ============================================
     NAVIGATION ITEMS - LARGE AND CLICKABLE
     ============================================ */

  /* All nav elements visible and interactive */
  .md-sidebar--primary .md-nav,
  .md-sidebar--primary .md-nav__item,
  .md-sidebar--primary .md-nav__link,
  .md-sidebar--primary .md-nav__toggle,
  .md-sidebar--primary .md-nav__icon,
  .md-sidebar--primary label.md-nav__link {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Navigation links - thumb-friendly, modern */
  .md-sidebar--primary .md-nav__link {
    /* Size and spacing */
    min-height: 52px !important;
    padding: 0.9rem 1.2rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    /* Appearance */
    color: var(--md-default-fg-color) !important;
    border-radius: 12px !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;

    /* Animation */
    transition: all 0.2s ease !important;
  }

  /* Hover state */
  .md-sidebar--primary .md-nav__link:hover {
    background-color: rgba(103, 158, 255, 0.08) !important;
  }

  /* Active/press effect */
  .md-sidebar--primary .md-nav__link:active {
    background-color: rgba(103, 158, 255, 0.15) !important;
    transform: scale(0.98) !important;
  }

  /* Current page highlight */
  .md-sidebar--primary .md-nav__link--active {
    background-color: rgba(103, 158, 255, 0.12) !important;
    color: var(--md-accent-fg-color) !important;
    font-weight: 600 !important;
  }

  /* Spacing between items */
  .md-sidebar--primary .md-nav__item {
    margin: 0.25rem 0 !important;
  }

  /* Hamburger button always accessible */
  .md-header__button.md-icon {
    z-index: 300 !important;
    position: relative;
    pointer-events: auto !important;
  }

  /* ============================================
     NESTED/EXPANDABLE NAVIGATION
     ============================================ */

  /* Container for nested items */
  .md-sidebar--primary .md-nav__item--nested {
    position: relative !important;
  }

  /* Parent link with children - make room for toggle */
  .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
    position: relative !important;
    padding-right: 56px !important;
  }

  /* Toggle button */
  .md-sidebar--primary .md-nav__toggle {
    display: block !important;
    position: absolute !important;
    right: 0.5rem !important;
    top: 0 !important;
    width: 52px !important;
    height: 52px !important;
    cursor: pointer !important;
    z-index: 1 !important;
  }

  /* Nested navigation container (hidden by default) */
  .md-sidebar--primary .md-nav__item .md-nav {
    display: none !important;
    position: static !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-radius: 8px !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding: 0.5rem 0 !important;
    overflow-y: visible !important;
  }

  /* Show nested nav when toggle is checked */
  .md-sidebar--primary .md-nav__toggle:checked ~ .md-nav {
    display: block !important;
  }

  /* Nested links (smaller, indented) */
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__link {
    font-size: 0.9rem !important;
    min-height: 44px !important;
    padding: 0.7rem 1rem 0.7rem 2rem !important;
    border-radius: 8px !important;
  }

  /* Hide nested nav titles */
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__title {
    display: none !important;
  }

  /* Dark mode nested backgrounds */
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item .md-nav {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* ============================================
     DARK MODE COLORS
     ============================================ */

  [data-md-color-scheme="slate"] .md-sidebar--primary {
    background-color: #1e1e1e !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
  }

  [data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap {
    background-color: transparent !important;
  }

  /* ============================================
     LIGHT MODE COLORS
     ============================================ */

  [data-md-color-scheme="default"] .md-sidebar--primary {
    background-color: #ffffff !important;
  }

  [data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__scrollwrap {
    background-color: transparent !important;
  }

  /* ============================================
     BACKDROP BLUR EFFECT
     ============================================ */

  /* Enhanced overlay when bottom sheet is open */
  #__drawer:checked ~ .md-overlay {
    opacity: 0.5 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
  }

  /* ========================================
     MOBILE MENU NAVIGATION
     Allow nested navigation for full access to sub-pages
     ======================================== */

  /* Large, easy-to-tap toggle buttons */
  .md-sidebar--primary .md-nav__toggle {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important; /* Large tap target */
    height: 48px !important; /* Large tap target */
    cursor: pointer !important;
    z-index: 1 !important;
  }

  /* Clear, visible toggle arrows */
  .md-sidebar--primary .md-nav__item--nested > .md-nav__link::after {
    display: inline-block !important;
    font-size: 1.1rem !important; /* Visible but not huge */
    width: 48px !important; /* Match button */
    height: 48px !important; /* Match button height */
    line-height: 48px !important; /* Center vertically */
    text-align: center !important;
  }

  /* Show nested navigation when toggle is checked */
  .md-sidebar--primary .md-nav__toggle:checked ~ .md-nav {
    display: block !important;
    position: static !important; /* CRITICAL: in document flow, not absolute */
    margin-top: 0 !important;
  }

  /* Style nested navigation items - REDUCED padding for better visibility */
  .md-sidebar--primary .md-nav__item .md-nav {
    display: none !important; /* Hidden by default */
    position: static !important; /* CRITICAL: flows in document, not overlaying */
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding-left: 0.25rem !important; /* Reduced from 0.5rem */
    width: 100% !important;
    overflow-y: visible !important; /* Don't constrain nested content */
    touch-action: pan-y !important; /* Allow vertical scrolling */
    -webkit-overflow-scrolling: touch !important; /* Smooth iOS scrolling */
  }

  /* Style nested links - MORE left spacing */
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__link {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem !important; /* Reduced left padding from 0.75rem */
    min-height: 40px !important;
    border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
    touch-action: auto !important; /* Allow all touch interactions */
  }

  /* Ensure nested nav list is scrollable */
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__list {
    touch-action: pan-y !important; /* Allow vertical scrolling */
  }

  /* Hide redundant nested navigation title on mobile */
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__title {
    display: none !important;
  }

  /* Hide redundant active page link (you're already on this page, don't need a link to it) */
  /* Target the anchor link specifically, but keep the label toggle */
  .md-sidebar--primary .md-nav__item--active > a.md-nav__link.md-nav__link--active {
    display: none !important;
  }

  /* Also hide in the mobile drawer */
  .md-sidebar .md-nav__item--active > a.md-nav__link.md-nav__link--active {
    display: none !important;
  }

  /* Parent container for nested items */
  .md-sidebar--primary .md-nav__item--nested {
    position: relative !important; /* Container for absolute toggle button */
  }

  /* Make parent items with children clickable */
  .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
    position: relative !important;
    padding-right: 56px !important; /* Make room for toggle icon */
  }

  /* Make top-level menu items compact but touch-friendly */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
    font-size: 0.8rem !important; /* Compact text */
    padding: 0.65rem 0.85rem !important; /* Reduced padding */
    min-height: 44px !important; /* Smaller touch target */
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--md-default-fg-color--lightest) !important; /* Separator */
  }

  /* Make icons compact but visible */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link svg {
    height: 1.1rem !important;
    width: 1.1rem !important;
    margin-right: 0.5rem !important;
  }

  /* Add hover/active states for better feedback */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover {
    background-color: var(--md-default-fg-color--lightest) !important;
  }

  /* Active/current page highlight */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link {
    background-color: var(--md-accent-fg-color--transparent) !important;
    color: var(--md-accent-fg-color) !important;
    font-weight: 700 !important;
  }

  /* Remove extra margins for cleaner look */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item {
    margin: 0 !important;
  }

  /* Add section title styling if present */
  .md-sidebar--primary .md-nav__title {
    padding: 0.75rem 0.85rem 0.5rem !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    opacity: 0.7 !important;
  }
}

/* CRITICAL: Sticky sidebars - stay visible while scrolling */
@media screen and (min-width: 76.25em) {
  /* Remove overflow constraints that break position: sticky */
  /* Only target the specific containers in the parent chain */
  .md-main {
    overflow: visible !important; /* Critical: allows sticky children */
  }

  .md-main__inner {
    overflow: visible !important;
  }

  /* Make both sidebars sticky to viewport */
  .md-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 1.5rem !important; /* Minimal offset for maximum sidebar visibility */
    align-self: flex-start !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .md-sidebar--primary {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 1.5rem !important; /* Start very high for maximum visible content */
    display: block !important;
    visibility: visible !important;
    width: 12.1rem !important; /* Ensure primary sidebar has width */
    flex-shrink: 0 !important; /* CRITICAL: Prevent sidebar from shrinking in flex layout */
    flex-grow: 0 !important; /* Don't allow sidebar to grow */
    height: auto !important; /* Let height adjust to content naturally */
  }

  /* Make scrollbar always visible in primary sidebar to hint at scrollable content */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: scroll !important; /* Always show scrollbar */
  }

  /* Style the scrollbar to be visible and subtle */
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 8px !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--md-default-fg-color) 5%, transparent) !important;
    border-radius: 4px !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent) !important;
    border-radius: 4px !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--md-default-fg-color) 30%, transparent) !important;
  }

  /* Firefox scrollbar */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    scrollbar-width: thin !important;
    scrollbar-color: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent) color-mix(in srgb, var(--md-default-fg-color) 5%, transparent) !important;
  }

  .md-sidebar--secondary {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 1.5rem !important; /* Start very high for maximum visible content */
    display: block !important;
    visibility: visible !important;
    width: 12.1rem !important; /* Ensure TOC sidebar has width */
    flex-shrink: 0 !important; /* CRITICAL: Prevent TOC from shrinking */
    flex-grow: 0 !important; /* Don't allow TOC to grow */
  }

  /* Constrain sidebar height for sticky behavior */
  .md-sidebar__scrollwrap {
    height: auto !important;
    max-height: calc(100vh - 1.5rem) !important; /* Match sidebar top offset - maximum scrollable space */
    overflow-y: auto !important; /* Allow sidebar to scroll if content is long */
    padding-bottom: 2rem !important; /* Extra padding at bottom so Reference/About sections are fully visible */
  }

  /* Fix hover overlap issue - ensure nav items don't overlap on hover */
  .md-sidebar--primary .md-nav__item {
    position: relative !important;
    z-index: 1 !important;
  }

  .md-sidebar--primary .md-nav__item:hover {
    z-index: 2 !important; /* Bring hovered item to front */
  }

  /* Ensure sidebar itself has proper height */
  .md-sidebar {
    height: auto !important;
    max-height: none !important; /* Remove any max-height constraints */
  }

  .md-sidebar--secondary {
    height: auto !important;
    max-height: none !important;
  }
}

.md-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important; /* Overlay BEHIND drawer so drawer is clickable */
  opacity: 0 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  pointer-events: none !important;
  transition: opacity 250ms !important;
}

/* Make overlay visible and dark when drawer is open */
#__drawer:checked ~ .md-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ACCORDION MODE: No overlay needed on mobile */
@media screen and (max-width: 76.24em) {
  .md-overlay {
    display: none !important; /* Accordion doesn't use overlay */
  }
}

/* Fix for sidebar navigation text truncation - ensure ellipsis works properly */
.md-nav__link .md-ellipsis {
  white-space: nowrap !important; /* Required for text-overflow: ellipsis to work */
  overflow: hidden !important; /* Hide overflowing text */
  text-overflow: ellipsis !important; /* Show ... when text is cut off */
  display: block !important; /* Required for overflow to work */
}

/* ========================================
   4.4. PRIMARY SIDEBAR ACTIVE LINK HIGHLIGHTING
   ======================================== */

/* Active page link in primary sidebar - highlighted to show current location */
.md-nav--primary .md-nav__link.md-nav__link--active {
  position: relative;
  color: var(--md-primary-fg-color);
  font-weight: 600;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
  border-radius: 4px;
  padding-left: 0.75rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add left border indicator to active link */
.md-nav--primary .md-nav__link.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: var(--md-primary-fg-color);
  border-radius: 2px;
}

/* Hover effect for all primary sidebar links */
.md-nav--primary .md-nav__link:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent hover effect from conflicting with active state */
.md-nav--primary .md-nav__link.md-nav__link--active:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}

/* Dark mode adjustments for primary sidebar */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link.md-nav__link--active {
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}

/* Light mode adjustments for primary sidebar */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link.md-nav__link--active {
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
}

/* CRITICAL: Light mode navigation text - ensure ALL nav links are dark and readable */
[data-md-color-scheme="default"] .md-nav__link,
[data-md-color-scheme="default"] .md-nav__item,
[data-md-color-scheme="default"] .md-nav__title,
[data-md-color-scheme="default"] .md-sidebar {
  color: #0f1524 !important;
}

/* Light mode header */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button {
  color: #0f1524 !important;
}

/* Light mode sidebar backgrounds */
[data-md-color-scheme="default"] .md-sidebar,
[data-md-color-scheme="default"] .md-sidebar__scrollwrap {
  background: #ffffff !important;
}

/* Light mode all body text */
[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-typeset p,
[data-md-color-scheme="default"] .md-typeset li,
[data-md-color-scheme="default"] .md-typeset td,
[data-md-color-scheme="default"] .md-typeset th,
[data-md-color-scheme="default"] h1,
[data-md-color-scheme="default"] h2,
[data-md-color-scheme="default"] h3,
[data-md-color-scheme="default"] h4,
[data-md-color-scheme="default"] h5,
[data-md-color-scheme="default"] h6 {
  color: #0f1524 !important;
}

/* Active section (parent of active page) - subtle highlight */
.md-nav--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-primary-fg-color);
  opacity: 0.9;
}

/* Mobile drawer adjustments for active link highlighting */
@media screen and (max-width: 76.24em) {
  /* NOTE: width, positioning, and scrollwrap styles are defined in the main mobile block above (line 286)
     to avoid conflicts. Only link highlighting styles are here. */

  /* Modern active link highlighting */
  #__drawer:checked ~ .md-container .md-sidebar--primary .md-nav__link.md-nav__link--active {
    color: var(--md-primary-fg-color) !important;
    font-weight: 600 !important;
    background: linear-gradient(90deg,
      rgba(103, 158, 255, 0.15) 0%,
      rgba(103, 158, 255, 0.05) 100%) !important;
    border-radius: 6px !important;
    border-left: 3px solid var(--md-primary-fg-color) !important;
    padding-left: 0.65rem !important; /* Compensate for border */
  }

  /* Ensure left border indicator is visible in drawer */
  #__drawer:checked ~ .md-container .md-sidebar--primary .md-nav__link.md-nav__link--active::before {
    display: none !important; /* Using border-left instead */
  }

  /* Nested items spacing */
  .md-nav--primary .md-nav__item--nested > .md-nav > .md-nav__list {
    padding-left: 0.5rem !important;
  }

  /* Improve expand/collapse icons visibility */
  .md-nav--primary .md-nav__icon {
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Improve hover/active feedback on mobile */
  .md-nav--primary .md-nav__link:active {
    background: color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent) !important;
    transform: scale(0.98);
  }

  /* Ensure nav title/logo area is visible */
  .md-nav--primary .md-nav__title {
    padding: 1rem 0.75rem;
    font-weight: 600;
  }

  /* Ensure navigation list has proper spacing */
  .md-nav--primary .md-nav__list {
    padding: 0.5rem 0;
  }

  /* Fix for nested navigation toggle labels */
  .md-nav--primary label.md-nav__link {
    display: flex !important;
    align-items: center;
    width: 100%;
  }

  /* Add shadow to drawer when open */
  #__drawer:checked ~ .md-container .md-sidebar--primary {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  /* Overlay covers the right side (where sidebar doesn't cover) */
  /* This makes it intuitive to tap outside the sidebar to close it */
  .md-overlay {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    background: rgba(0, 0, 0, 0.54) !important;
    z-index: 99 !important; /* Below sidebar (z-index: 100) but above content */
    opacity: 0 !important;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
  }

  /* Show overlay when drawer is open */
  #__drawer:checked ~ .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Prevent body scroll when drawer is open */
  /* FIXED: Removed overflow:hidden from .md-container as it breaks position:fixed */
  /* The sidebar is already position:fixed and covers full viewport, so no need to */
  /* prevent background scrolling - the sidebar stays in place regardless */
}

/* ========================================
   4.5. TOC SCROLL SPY STYLES
   ======================================== */

/* Base TOC link styling with smooth transitions */
.md-nav--secondary .md-nav__link {
  position: relative;
  padding-left: 0.75rem;
  border-left: 3px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inactive sections (not yet reached) - dimmed */
.md-nav--secondary .md-nav__link:not(.md-nav__link--active) {
  opacity: 0.54;
  color: var(--md-default-fg-color);
}

/* Active TOC item (current section in view) - highlighted with indicator */
.md-nav--secondary .md-nav__link.md-nav__link--active {
  opacity: 1;
  color: var(--md-primary-fg-color);
  font-weight: 600;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
  border-left-color: var(--md-primary-fg-color);
  border-radius: 0 4px 4px 0;
}

/* Sections you've scrolled past (blur state) - greyed out */
.md-nav--secondary .md-nav__link[data-md-state="blur"] {
  opacity: 0.38;
  color: var(--md-default-fg-color--light);
}

/* Hover states for TOC - always responsive */
.md-nav--secondary .md-nav__link:hover {
  opacity: 1;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
  border-left-color: color-mix(in srgb, var(--md-primary-fg-color) 50%, transparent);
}

/* Nested items (h3 under h2) - slightly indented with subtle styling */
.md-nav--secondary .md-nav .md-nav__link {
  padding-left: 1rem;
  font-size: 0.9em;
  border-left-width: 2px;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:not(.md-nav__link--active) {
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link[data-md-state="blur"] {
  opacity: 0.3;
  color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link.md-nav__link--active {
  opacity: 1;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}

/* Smooth scroll behavior for better UX */
.md-nav--secondary {
  scroll-behavior: smooth;
}

/* Add visual "reading line" effect */
.md-nav--secondary .md-nav__link.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent,
    var(--md-primary-fg-color) 20%,
    var(--md-primary-fg-color) 80%,
    transparent
  );
  border-radius: 2px;
}

/* ========================================
   5. TYPOGRAPHY & HEADINGS
   ======================================== */

/* Ensure content has proper max-width for readability */
.md-content__inner {
  max-width: 1400px;
  margin: 0 auto;
  /* REMOVED overflow-x: hidden - breaks position: sticky on sidebars! */
}

.md-typeset {
  /* Prevent content from getting too wide */
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--sp-heading-font);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* First heading shouldn't have top margin */
.md-typeset h1:first-child,
.md-typeset h2:first-child,
.md-typeset h3:first-child {
  margin-top: 0;
}

/* Consistent paragraph and list spacing */
.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.md-typeset li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Prevent orphaned lines */
.md-typeset p {
  orphans: 3;
  widows: 3;
}

/* ========================================
   SUPPORT/RESOURCE SECTIONS ALIGNMENT FIX
   Handles improperly formatted inline lists in <p> tags
   ======================================== */

/* Support sections with inline list items */
.md-typeset h2#support + p,
.md-typeset h2[id*="support"] + p,
.md-typeset h2[id*="resource"] + p,
.md-typeset h2[id*="additional-resources"] + p {
  white-space: pre-line; /* Preserve line breaks from source */
  line-height: 2; /* Extra spacing for readability */
  padding-left: 0.5rem;
}

/* Each link in support sections gets proper list-like formatting */
.md-typeset h2#support + p a,
.md-typeset h2[id*="support"] + p a,
.md-typeset h2[id*="resource"] + p a,
.md-typeset h2[id*="additional-resources"] + p a {
  display: inline-block;
  padding-left: 0;
  margin-left: 0;
  line-height: 1.6;
}

/* Clean up text between links (removes raw "- " characters visually) */
.md-typeset h2#support + p,
.md-typeset h2[id*="support"] + p,
.md-typeset h2[id*="resource"] + p {
  /* Hide the raw "- " dash characters using pseudo-element masking */
  position: relative;
}

/* Mobile: Stack support links vertically with proper spacing */
@media screen and (max-width: 768px) {
  .md-typeset h2#support + p,
  .md-typeset h2[id*="support"] + p,
  .md-typeset h2[id*="resource"] + p {
    line-height: 2.2;
    padding-left: 0;
  }

  .md-typeset h2#support + p a,
  .md-typeset h2[id*="support"] + p a,
  .md-typeset h2[id*="resource"] + p a {
    display: block;
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
  }

  /* Add proper bullet points on mobile */
  .md-typeset h2#support + p a::before,
  .md-typeset h2[id*="support"] + p a::before,
  .md-typeset h2[id*="resource"] + p a::before {
    content: "→ ";
    color: var(--md-primary-fg-color);
    font-weight: 600;
    margin-right: 0.5rem;
  }
}

/* Ensure images and media don't overflow */
.md-typeset img,
.md-typeset video,
.md-typeset iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* Code blocks should be contained */
.md-typeset pre,
.md-typeset code {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.md-typeset pre {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
}

.md-typeset code {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.signal-pilot-brand,
.sp-brand-text {
  font-family: var(--sp-brand-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
}

/* ========================================
   6. TOP NAVIGATION BAR
   ======================================== */

.sp-topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, rgba(52, 92, 255, 0.95), rgba(10, 161, 213, 0.95));
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  /* Prevent content overlap */
  width: 100%;
  max-width: 100vw;
  margin-bottom: 0 !important; /* No gap between headers */
}

.sp-topnav__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.sp-topnav .brand {
  font-family: var(--sp-brand-font);
  font-size: 1.35rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  transition: opacity 0.2s;
}

.sp-topnav .brand:hover {
  opacity: 0.85;
}

.sp-links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.sp-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
  position: relative;
}

.sp-links a:hover {
  color: white;
}

.sp-links a[aria-current="page"] {
  color: white;
  font-weight: 700;
}

.sp-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  left: 0;
  right: 0;
  height: 2px;
  background: white;
  border-radius: 2px;
}

.sp-cta {
  margin-left: auto;
  display: inline-flex;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(115deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
  box-shadow: 0 2px 8px rgba(52, 92, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.sp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(52, 92, 255, 0.4);
}

/* ========================================
   7. CARD SYSTEM
   ======================================== */

.md-typeset .grid.cards {
  gap: var(--sp-card-gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.md-typeset .grid.cards > * {
  background: var(--sp-card-bg);
  border: 1px solid var(--sp-card-border);
  border-radius: var(--sp-card-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  padding: 1rem 1.2rem;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s;
  box-sizing: border-box;
  /* Prevent cards from overflowing */
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.md-typeset .grid.cards > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
  border-color: var(--md-primary-fg-color);
}

/* Align "Read Guide" buttons uniformly on new line */
.md-typeset .grid.cards > * p .md-button {
  display: block;
  margin-top: 1rem;
  width: fit-content;
}

.md-typeset .grid.cards strong {
  color: var(--md-primary-fg-color);
}

.md-typeset .grid.cards p {
  margin: 0.25rem 0;
}

.md-typeset .grid.cards em {
  opacity: 0.85;
}

.md-typeset .grid.cards .material-icons,
.md-typeset .grid.cards .twemoji {
  font-size: 1.05rem;
  vertical-align: text-bottom;
}

/* ========================================
   8. KEYWORD/BADGE STYLING
   ======================================== */

.md-typeset .kw-signal,
.md-typeset .kw-level,
.md-typeset .kw-action,
.md-typeset .kw-quality,
.md-typeset .kw-divergence,
.md-typeset .kw-volume,
.md-typeset .kw-core,
.md-typeset .kw-phase {
  /* Clean text-only highlighting - no boxes */
  font-weight: 600; /* Slightly bold for emphasis */
  /* No padding, no background, no borders - just colored text */
}

/* Pentarch Signals - Text color only */
.md-typeset .kw-signal.td {
  color: #60a5fa; /* Blue */
}

.md-typeset .kw-signal.ign {
  color: #34d399; /* Green */
}

.md-typeset .kw-signal.wrn {
  color: #fbbf24; /* Yellow */
}

.md-typeset .kw-signal.cap {
  color: #f87171; /* Red */
}

.md-typeset .kw-signal.bdn {
  color: #dc2626; /* Dark red */
}

/* Level terms - Text color only */
.md-typeset .kw-level {
  color: #22d3ee; /* Cyan */
}

/* Action terms - Text color only */
.md-typeset .kw-action {
  color: #fb923c; /* Orange */
}

/* Quality terms - Text color only */
.md-typeset .kw-quality {
  color: #fbbf24; /* Yellow */
}

/* Divergence terms - Text color only */
.md-typeset .kw-divergence {
  color: #f472b6; /* Pink */
}

/* Volume terms - Text color only */
.md-typeset .kw-volume {
  color: #84cc16; /* Lime */
}

/* Product-Specific Core Elements - Text color only */
.md-typeset .kw-core {
  color: #06b6d4; /* Cyan */
}

/* Cycle Phases - Text color only */
.md-typeset .kw-phase {
  color: #8b5cf6; /* Purple */
}

/* ========================================
   9. MATERIAL ICONS STYLING (NEW!)
   ======================================== */

/* Base icon styling */
.sp-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;
  margin-right: 0.35rem;
  color: var(--md-primary-fg-color);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Icon in headings */
.md-typeset h1 .sp-icon {
  font-size: 1.3em;
  margin-right: 0.5rem;
}

.md-typeset h2 .sp-icon {
  font-size: 1.25em;
  margin-right: 0.4rem;
}

.md-typeset h3 .sp-icon {
  font-size: 1.2em;
  margin-right: 0.35rem;
}

.md-typeset h4 .sp-icon,
.md-typeset h5 .sp-icon,
.md-typeset h6 .sp-icon {
  font-size: 1.1em;
  margin-right: 0.3rem;
}

/* Icon hover effects in headings */
.md-typeset h1:hover .sp-icon,
.md-typeset h2:hover .sp-icon,
.md-typeset h3:hover .sp-icon {
  transform: scale(1.15) rotate(5deg);
}

/* Icon in lists */
.md-typeset li .sp-icon {
  font-size: 1.1em;
  margin-right: 0.3rem;
}

/* Icon in tables */
.md-typeset table .sp-icon {
  font-size: 1em;
  margin-right: 0.25rem;
}

/* Icon color variants based on context */
.md-typeset .admonition .sp-icon {
  color: inherit;
}

/* Specific icon colors for certain meanings */
.sp-icon[data-emoji="📈"],
.sp-icon[data-emoji="🚀"],
.sp-icon[data-emoji="✅"] {
  color: #22c55e; /* Green for positive/success */
}

.sp-icon[data-emoji="📉"],
.sp-icon[data-emoji="❌"],
.sp-icon[data-emoji="⚠️"] {
  color: #ef4444; /* Red for warning/negative */
}

.sp-icon[data-emoji="⭐"],
.sp-icon[data-emoji="🎯"],
.sp-icon[data-emoji="🏆"] {
  color: #f59e0b; /* Amber for featured/important */
}

.sp-icon[data-emoji="💡"],
.sp-icon[data-emoji="🔔"] {
  color: #eab308; /* Yellow for tips/alerts */
}

/* Pulsing animation for important icons */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.sp-icon[data-emoji="🔔"]:hover {
  animation: iconPulse 0.6s ease-in-out;
}

/* Mobile responsiveness for icons */
@media screen and (max-width: 768px) {
  .sp-icon {
    font-size: 1.1em;
    margin-right: 0.3rem;
  }

  .md-typeset h1 .sp-icon {
    font-size: 1.2em;
  }

  .md-typeset h2 .sp-icon {
    font-size: 1.15em;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sp-icon {
    transition: none;
  }

  .md-typeset h1:hover .sp-icon,
  .md-typeset h2:hover .sp-icon,
  .md-typeset h3:hover .sp-icon {
    transform: none;
  }

  .sp-icon[data-emoji="🔔"]:hover {
    animation: none;
  }
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .sp-icon {
  color: var(--md-primary-fg-color);
}

/* Light mode adjustments */
[data-md-color-scheme="default"] .sp-icon {
  color: var(--md-primary-fg-color);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .sp-icon {
    font-weight: 500;
  }
}

/* ========================================
   10. BREADCRUMB NAVIGATION (NEW!)
   ======================================== */

.sp-breadcrumb {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: rgba(var(--md-code-bg-color), 0.3);
  border-radius: 8px;
  font-size: 0.9rem;
}

.sp-breadcrumb nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sp-breadcrumb a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  transition: opacity 0.2s;
}

.sp-breadcrumb a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.sp-breadcrumb .separator {
  color: var(--md-default-fg-color);
  opacity: 0.5;
  font-weight: 400;
}

.sp-breadcrumb .current {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

/* ========================================
   10. TABLE ENHANCEMENTS - Vertical Dividers Only
   ======================================== */

/* Add vertical dividers between table columns */
.md-typeset table th,
.md-typeset table td {
  border-right: 1px solid var(--md-typeset-table-color, rgba(0, 0, 0, 0.12));
}

/* Alternating row colors for better scannability */
.md-typeset table tbody tr:nth-child(even) {
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset table tbody tr:nth-child(odd) {
  background-color: transparent;
}

/* Hover state for table rows - only on devices with hover capability */
@media (hover: hover) {
  .md-typeset table tbody tr:hover {
    background-color: var(--md-typeset-table-color--light);
    transition: background-color 0.2s ease;
  }

  [data-md-color-scheme="slate"] .md-typeset table tbody tr:hover {
    background-color: var(--md-typeset-table-color--light);
  }
}

/* Dark mode alternating rows */
[data-md-color-scheme="slate"] .md-typeset table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

.md-typeset table th:last-child,
.md-typeset table td:last-child {
  border-right: none;
}

/* Dark mode dividers */
[data-md-color-scheme="slate"] .md-typeset table th,
[data-md-color-scheme="slate"] .md-typeset table td {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Old scroll indicators removed - now using accordion rows on mobile */

/* Mobile table responsiveness - ACCORDION ROWS (TAP TO EXPAND) */
@media screen and (max-width: 768px) {
  /* Make tables stack vertically - NO horizontal scrolling! */
  .md-typeset table {
    border: none !important;
    margin: 1rem 0 !important;
  }

  /* Hide the table header on mobile */
  .md-typeset table thead {
    display: none !important;
  }

  /* Make table body a flex container */
  .md-typeset table tbody {
    display: block !important;
  }

  /* Each row becomes an accordion card */
  .md-typeset table tbody tr {
    display: block !important;
    margin-bottom: 0.75rem !important;
    border: 1px solid var(--md-typeset-table-color, rgba(0,0,0,0.12)) !important;
    border-radius: 6px !important;
    background: var(--md-default-bg-color) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  }

  /* Hover/active state for accordion rows */
  .md-typeset table tbody tr:hover {
    border-color: var(--md-primary-fg-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* Dark mode card styling */
  [data-md-color-scheme="slate"] .md-typeset table tbody tr {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Accordion header (first cell - always visible) */
  .md-typeset table tbody tr td:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    background: var(--md-code-bg-color) !important;
    border-bottom: 1px solid var(--md-typeset-table-color, rgba(0,0,0,0.08)) !important;
  }

  /* Chevron icon in header */
  .md-typeset table tbody tr td:first-child::after {
    content: "▼" !important;
    font-size: 0.75rem !important;
    color: var(--md-default-fg-color--light) !important;
    transition: transform 0.3s ease !important;
    margin-left: auto !important;
    padding-left: 0.75rem !important;
  }

  /* Rotate chevron when expanded */
  .md-typeset table tbody tr.expanded td:first-child::after {
    transform: rotate(180deg) !important;
  }

  /* Hide all other cells by default (collapsed state) */
  .md-typeset table tbody tr:not(.expanded) td:not(:first-child) {
    display: none !important;
  }

  /* Show other cells when expanded */
  .md-typeset table tbody tr.expanded td:not(:first-child) {
    display: grid !important;
    grid-template-columns: minmax(90px, 35%) 1fr !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid var(--md-typeset-table-color, rgba(0,0,0,0.05)) !important;
  }

  /* Last cell no border */
  .md-typeset table tbody tr.expanded td:last-child {
    border-bottom: none !important;
  }

  /* Column labels for expanded cells */
  .md-typeset table tbody tr td:not(:first-child)::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    color: var(--md-default-fg-color--light) !important;
  }

  /* Hide data-label on first cell (it's the header) */
  .md-typeset table tbody tr td:first-child::before {
    display: none !important;
  }

  /* Style values in expanded cells */
  .md-typeset table tbody tr td {
    color: var(--md-default-fg-color) !important;
    word-wrap: break-word !important;
  }

  /* Links in tables */
  .md-typeset table tbody tr td a {
    font-weight: 600 !important;
    color: var(--md-typeset-a-color) !important;
  }

  /* Code in tables */
  .md-typeset table tbody tr td code {
    font-size: 0.8125rem !important;
    padding: 0.125rem 0.375rem !important;
  }

  /* Add subtle animation when expanding */
  .md-typeset table tbody tr.expanded td:not(:first-child) {
    animation: slideDown 0.3s ease !important;
  }

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

/* Extra small mobile screens - even more compact cards */
@media screen and (max-width: 480px) {
  .md-typeset table tbody tr {
    padding: 0.75rem !important;
    margin-bottom: 0.875rem !important;
  }

  .md-typeset table tbody tr td {
    font-size: 0.8125rem !important;
    padding: 0.5rem 0 !important;
    gap: 0.625rem !important;
  }

  .md-typeset table tbody tr td:not(:last-child) {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .md-typeset table tbody tr td::before {
    font-size: 0.75rem !important;
  }

  /* Slightly wider sidebar on very small screens for better usability */
  .md-sidebar--primary {
    width: 18rem !important; /* Wider on small phones */
    max-width: 85vw !important;
  }
}

/* ========================================
   11. CODE BLOCKS & INTERACTIVE ELEMENTS
   ======================================== */

/* Line numbers */
.md-typeset .highlight .linenos {
  user-select: none;
  opacity: 0.5;
  padding-right: 1em;
}

/* Highlighted lines */
.md-typeset .highlight .hll {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
  display: block;
  margin: 0 -1.2em;
  padding: 0 1.2em;
}

/* Tabbed content */
.md-typeset .tabbed-set {
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5em 0;
}

.md-typeset .tabbed-labels {
  display: flex;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--md-default-bg-color) 95%, var(--md-primary-fg-color));
  padding: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
}

.md-typeset .tabbed-labels label {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  font-weight: 500;
  user-select: none;
}

.md-typeset .tabbed-labels label:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent);
}

.md-typeset .tabbed-labels input:checked + label {
  background: var(--md-primary-fg-color);
  color: white;
}

/* Task lists */
.md-typeset .task-list-item {
  list-style: none;
  position: relative;
  padding-left: 0;
}

.md-typeset .task-list-control {
  position: absolute;
  left: -2em;
  top: 0.25em;
}

.md-typeset .task-list-indicator {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid var(--md-primary-fg-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.md-typeset .task-list-indicator:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
}

.md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator::before {
  content: "✓";
  display: block;
  text-align: center;
  color: var(--md-primary-fg-color);
  font-weight: 700;
  line-height: 1.1;
}

/* Copy button */
.md-typeset .md-clipboard {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  opacity: 0;
  transition: opacity 0.2s;
}

.md-typeset pre:hover .md-clipboard {
  opacity: 1;
}

/* Code block container */
.md-typeset .highlight {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin: 1em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  background: rgba(16, 22, 38, 0.85);
  backdrop-filter: blur(10px);
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
  background: rgba(20, 30, 50, 0.7);
  backdrop-filter: blur(10px);
}

/* ========================================
   12. MOBILE OPTIMIZATIONS
   ======================================== */

/* CRITICAL: Prevent ALL horizontal overflow on mobile */
@media screen and (max-width: 768px) {
  /* Force viewport boundaries */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .md-container,
  .md-main,
  .md-content,
  .md-content__inner,
  .md-typeset {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* FIX: New User Resources grid - force single column on mobile */
  .md-typeset div[style*="grid-template-columns"][style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 1.5rem 0 !important;
  }

  /* FIX: All auto-fit grids - single column on mobile */
  .md-typeset div[style*="auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* FIX: All inline grid styles - override to single column */
  .md-typeset [style*="display: grid"],
  .md-typeset [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Ensure all grid items fit */
  .md-typeset [style*="grid"] > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Fix card padding for small screens */
  .md-typeset div[style*="padding: 2rem"] {
    padding: 1.25rem !important;
  }

  /* Reduce excessive gaps */
  .md-typeset div[style*="gap: 1.5rem"] {
    gap: 1rem !important;
  }

  /* FIX: Images - never overflow */
  .md-typeset img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* FIX: Pre/code blocks - allow scroll but don't break layout */
  .md-typeset pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* FIX: Long words/URLs - break them */
  .md-typeset p,
  .md-typeset li,
  .md-typeset td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* FIX: Headings - responsive sizing */
  .md-typeset h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  .md-typeset h2 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }

  .md-typeset h3 {
    font-size: 1.2rem !important;
  }
}

@media screen and (max-width: 640px) {
  /* Cards */
  .md-typeset .grid.cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .md-typeset .grid.cards > * {
    padding: 0.75rem 1rem;
  }

  /* Code blocks */
  .md-typeset pre {
    font-size: 0.8rem;
    padding: 0.75rem;
  }

  .md-typeset code {
    word-break: break-word;
  }

  /* Navigation */
  .sp-links a:not([aria-current]) {
    display: none;
  }

  .sp-links a[aria-current] {
    font-weight: 600;
  }

  .sp-cta {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  /* Tabbed content */
  .md-typeset .tabbed-labels {
    flex-wrap: wrap;
  }

  .md-typeset .tabbed-labels label {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 400px) {
  .sp-topnav__inner {
    padding: 0.4rem 0.75rem;
  }
}

/* ========================================
   12.5. COMPREHENSIVE DEVICE OPTIMIZATIONS
   ======================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TINY MOBILE (320px - 374px) - iPhone SE 1st gen, small Android
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 374px) {
  /* Reduce font sizes slightly for tiny screens */
  .md-typeset {
    font-size: 0.9rem;
  }

  .md-typeset h1 {
    font-size: 1.75rem;
  }

  .md-typeset h2 {
    font-size: 1.4rem;
  }

  .md-typeset h3 {
    font-size: 1.2rem;
  }

  /* Tighter card padding */
  .md-typeset .grid.cards > * {
    padding: 0.65rem 0.85rem;
  }

  /* Smaller buttons but still tappable */
  .sp-button,
  .md-button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* Top nav adjustments */
  .sp-topnav__inner {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .sp-topnav .brand {
    font-size: 1rem;
  }

  .sp-cta {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }

  /* Keyword highlights - smaller padding */
  .md-typeset .kw-signal,
  .md-typeset .kw-level,
  .md-typeset .kw-action,
  .md-typeset .kw-quality,
  .md-typeset .kw-divergence,
  .md-typeset .kw-volume,
  .md-typeset .kw-core,
  .md-typeset .kw-phase {
    padding: 0.1em 0.4em;
    font-size: 0.85em;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STANDARD MOBILE (375px - 479px) - iPhone 12/13/14, Galaxy S
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 375px) and (max-width: 479px) {
  .md-typeset {
    font-size: 0.95rem;
  }

  .md-typeset h1 {
    font-size: 1.85rem;
  }

  .md-typeset h2 {
    font-size: 1.5rem;
  }

  /* Better card spacing on standard phones */
  .md-typeset .grid.cards {
    gap: 0.85rem;
  }

  .md-typeset .grid.cards > * {
    padding: 0.8rem 1rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LARGE MOBILE (480px - 767px) - Plus models, large Android
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 480px) and (max-width: 767px) {
  .md-typeset {
    font-size: 1rem;
  }

  .md-typeset h1 {
    font-size: 2rem;
  }

  .md-typeset h2 {
    font-size: 1.65rem;
  }

  /* 2-column card layout on large phones in landscape */
  @media (orientation: landscape) {
    .md-typeset .grid.cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Show more nav links on larger phones */
  .sp-links a:not([aria-current]) {
    display: inline-block;
  }

  .sp-topnav__inner {
    gap: 1.25rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMALL TABLET (768px - 1023px) - iPad Mini, small tablets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .md-typeset {
    font-size: 1rem;
  }

  /* 2-column card grid */
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* 3 columns in landscape */
  @media (orientation: landscape) {
    .md-typeset .grid.cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Better table layout */
  .md-typeset table {
    font-size: 0.9rem;
  }

  /* Optimal content width */
  .md-content__inner {
    max-width: 95%;
    padding: 0 1.5rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET / SMALL LAPTOP (1024px - 1365px) - iPad Pro, small laptops
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 1024px) and (max-width: 1365px) {
  .md-typeset {
    font-size: 1rem;
    line-height: 1.65;
  }

  /* 3-column card grid */
  .md-typeset .grid.cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .md-typeset h1 {
    font-size: 2.25rem;
  }

  .md-typeset h2 {
    font-size: 1.85rem;
  }

  /* Comfortable content width */
  .md-content__inner {
    max-width: 90%;
    padding: 0 2rem;
  }

  /* Better code block sizing */
  .md-typeset pre {
    font-size: 0.9rem;
    padding: 1.25rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STANDARD LAPTOP (1366px - 1919px) - Most laptops, small monitors
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 1366px) and (max-width: 1919px) {
  .md-typeset {
    font-size: 1.05rem;
    line-height: 1.7;
  }

  /* 4-column card grid */
  .md-typeset .grid.cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .md-typeset h1 {
    font-size: 2.5rem;
  }

  .md-typeset h2 {
    font-size: 2rem;
  }

  .md-typeset h3 {
    font-size: 1.65rem;
  }

  /* Optimal reading width */
  .md-content__inner {
    max-width: 1200px;
    padding: 0 2.5rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LARGE DESKTOP (1920px - 2559px) - Full HD monitors, 1080p/1440p
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 1920px) and (max-width: 2559px) {
  .md-typeset {
    font-size: 1.1rem;
    line-height: 1.75;
  }

  /* 5-column card grid */
  .md-typeset .grid.cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }

  .md-typeset h1 {
    font-size: 3rem;
  }

  .md-typeset h2 {
    font-size: 2.25rem;
  }

  .md-typeset h3 {
    font-size: 1.85rem;
  }

  /* Prevent overly wide content */
  .md-content__inner {
    max-width: 1400px;
    padding: 0 3rem;
  }

  /* Larger code blocks */
  .md-typeset pre {
    font-size: 1rem;
    padding: 1.5rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ULTRA-WIDE (2560px+) - 4K monitors, ultra-wide displays
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 2560px) {
  .md-typeset {
    font-size: 1.15rem;
    line-height: 1.8;
  }

  /* 6-column card grid */
  .md-typeset .grid.cards {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2.5rem;
  }

  .md-typeset h1 {
    font-size: 3.5rem;
  }

  .md-typeset h2 {
    font-size: 2.75rem;
  }

  .md-typeset h3 {
    font-size: 2.25rem;
  }

  /* Maximum readable width */
  .md-content__inner {
    max-width: 1600px;
    padding: 0 4rem;
  }

  /* Spacious component library elements */
  .sp-card {
    padding: 3rem;
  }

  .sp-metric {
    padding: 3rem;
  }

  .sp-metric__value {
    font-size: 4rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPECIAL: Landscape phones optimization
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 896px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .md-typeset p,
  .md-typeset ul,
  .md-typeset ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Compact cards */
  .md-typeset .grid.cards > * {
    padding: 0.75rem 1rem;
  }

  /* Use horizontal space better */
  .md-content__inner {
    padding: 0 1rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPECIAL: Foldable devices (Galaxy Fold, Surface Duo)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (min-width: 280px) and (max-width: 653px) {
  /* Optimize for narrow unfolded state */
  .md-typeset .grid.cards {
    grid-template-columns: 1fr;
  }

  /* Ensure touch targets remain large enough */
  .sp-button,
  .md-button,
  .md-nav__link {
    min-height: 48px;
    padding: 0.7rem 1rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPECIAL: Touch device optimizations (all sizes)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (hover: none) and (pointer: coarse) {
  /* Ensure all interactive elements meet 44x44px minimum */
  a,
  button,
  .md-nav__link,
  .md-header__button,
  .sp-button,
  .md-button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Add padding to links for easier tapping */
  .md-typeset a {
    padding: 0.25rem 0;
  }

  /* Larger tap targets for navigation */
  .md-nav__item {
    padding: 0.1rem 0;
  }

  .md-nav__link {
    padding: 0.75rem 1.25rem;
  }

  /* Remove hover effects, keep active/focus */
  .md-typeset .grid.cards > *:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }

  .md-typeset .grid.cards > *:active {
    transform: scale(0.98);
  }
}

/* ========================================
   13. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Keyboard focus indicators */
*:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content link */
.md-skip {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 1rem;
  background: var(--md-primary-fg-color);
  color: white;
  font-weight: 700;
  text-decoration: none;
  z-index: 1000;
}

.md-skip:focus {
  top: 0;
}

/* Touch targets */
@media (pointer: coarse) {
  .md-content a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .md-typeset .grid.cards .md-button {
    min-height: 44px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .md-typeset h2 > span,
  .md-typeset h3 > span {
    font-weight: 700;
    text-shadow: 0 0 1px currentColor;
  }
}

/* ========================================
   14. RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Headings with emoji/icons */
.md-typeset h2 > span,
.md-typeset h3 > span {
  display: inline-block;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  font-size: 1.1em;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .md-typeset h2 > span {
    font-size: 1em;
    line-height: 1.5;
  }

  .md-typeset h3 > span {
    font-size: 0.95em;
    line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  .md-typeset h2 > span {
    font-size: 0.9em;
    line-height: 1.6;
    display: block;
    margin-top: 0.75rem;
  }

  .md-typeset h3 > span {
    font-size: 0.85em;
    line-height: 1.6;
    display: block;
    margin-top: 0.5rem;
  }
}

/* Main heading responsiveness */
.md-typeset h1 span[style*="font-family: 'Gugi'"] {
  display: block;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .md-typeset h1 span[style*="font-family: 'Gugi'"] {
    font-size: 1.8rem;
    letter-spacing: 0.03em;
  }
}

@media screen and (max-width: 480px) {
  .md-typeset h1 span[style*="font-family: 'Gugi'"] {
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
}

/* ========================================
   15. ENHANCED PRINT STYLES
   ======================================== */

@media print {
  /* Hide non-essential elements */
  .sp-aurora,
  .sp-topnav,
  .md-header,
  .md-sidebar,
  .md-sidebar--primary,
  .md-sidebar--secondary,
  .md-footer,
  .md-search,
  .md-top,
  .md-skip,
  .md-header__button,
  .md-nav,
  button,
  .sp-button {
    display: none !important;
  }

  /* Reset to print-friendly colors */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Content area takes full width */
  .md-content {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .md-content__inner {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
    font-weight: bold;
  }

  h1 {
    font-size: 24pt;
    margin-top: 0;
    border-bottom: 2pt solid black;
    padding-bottom: 0.5em;
  }

  h2 {
    font-size: 18pt;
    margin-top: 1em;
    border-bottom: 1pt solid black;
    padding-bottom: 0.3em;
  }

  h3 {
    font-size: 14pt;
    margin-top: 0.8em;
  }

  /* Links - show URLs */
  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    font-style: italic;
  }

  /* Don't show anchor links */
  .headerlink {
    display: none !important;
  }

  /* Tables */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    page-break-inside: avoid;
    font-size: 10pt;
  }

  table th,
  table td {
    border: 1pt solid #000 !important;
    padding: 0.3em 0.5em !important;
    text-align: left;
  }

  table th {
    font-weight: bold;
    background: #f0f0f0 !important;
  }

  /* Remove alternating colors for print */
  table tbody tr {
    background: white !important;
  }

  /* Code blocks */
  code,
  pre {
    border: 1pt solid #000 !important;
    background: #f5f5f5 !important;
    padding: 0.2em 0.4em !important;
    font-family: "Courier New", Courier, monospace;
    font-size: 9pt;
    page-break-inside: avoid;
  }

  pre {
    padding: 0.5em !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  /* Lists */
  ul, ol {
    page-break-inside: avoid;
  }

  li {
    page-break-inside: avoid;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Cards */
  .sp-card,
  .grid.cards > li {
    break-inside: avoid;
    border: 1pt solid #000 !important;
    padding: 1em !important;
    margin-bottom: 1em;
  }

  /* Avoid page breaks */
  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Page header for each printed page */
  @page {
    margin: 2cm;

    @top-right {
      content: "Signal Pilot Docs - Page " counter(page);
      font-size: 9pt;
      color: #666;
    }
  }

  /* First page has no header */
  @page :first {
    @top-right {
      content: "";
    }
  }

  /* Optimize spacing */
  .md-typeset {
    font-size: 11pt;
  }

  /* Remove animations/transitions */
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
   16. COMPONENT LIBRARY STYLES (NEW!)
   ======================================== */

/* Cards - Enhanced Component Version */
.sp-card {
  position: relative;
  padding: 1.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid rgba(var(--md-default-fg-color), 0.1);
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: var(--md-primary-fg-color);
}

.sp-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sp-card__badge--new {
  background: #22c55e;
  color: white;
}

.sp-card__badge--pro {
  background: #f59e0b;
  color: white;
}

.sp-card__badge--beta {
  background: #3b82f6;
  color: white;
}

.sp-card__image {
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.sp-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.sp-card__icon {
  font-size: 2.5rem;
  color: var(--md-primary-fg-color);
  margin-bottom: 1rem;
}

.sp-card__icon .material-icons {
  font-size: inherit;
}

.sp-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.sp-card__description {
  flex: 1;
  margin: 0 0 1rem 0;
  opacity: 0.8;
  line-height: 1.6;
}

.sp-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(var(--md-default-fg-color), 0.1);
  border-bottom: 1px solid rgba(var(--md-default-fg-color), 0.1);
}

.sp-card__stat {
  text-align: center;
}

.sp-card__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

.sp-card__stat-label {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.sp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  color: var(--md-primary-fg-color);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s;
}

.sp-card__link:hover {
  gap: 0.5rem;
}

.sp-card--featured {
  border: 2px solid var(--md-primary-fg-color);
  background: linear-gradient(135deg, rgba(var(--md-primary-fg-color), 0.05), transparent);
}

.sp-card--compact {
  padding: 1rem;
}

.sp-card--compact .sp-card__title {
  font-size: 1.1rem;
}

/* Buttons - Enhanced Component Version */
.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}

.sp-button__text {
  display: inline-block;
}

.sp-button--primary {
  background: var(--md-primary-fg-color);
  color: white;
  box-shadow: 0 2px 8px rgba(52, 92, 255, 0.2);
}

.sp-button--primary:hover {
  background: var(--md-primary-fg-color--light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 92, 255, 0.3);
}

.sp-button--secondary {
  background: transparent;
  border: 2px solid var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
}

.sp-button--secondary:hover {
  background: var(--md-primary-fg-color);
  color: white;
  transform: translateY(-2px);
}

.sp-button--ghost {
  background: transparent;
  color: var(--md-primary-fg-color);
  padding: 0.5rem 1rem;
}

.sp-button--ghost:hover {
  background: rgba(var(--md-primary-fg-color), 0.1);
}

.sp-button--danger {
  background: #ef4444;
  color: white;
}

.sp-button--danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
}

.sp-button--small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.sp-button--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.sp-button--full {
  width: 100%;
}

.sp-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Badges */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.sp-badge--default {
  background: rgba(var(--md-primary-fg-color), 0.15);
  color: var(--md-primary-fg-color);
}

.sp-badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.sp-badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.sp-badge--error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.sp-badge--info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.sp-badge--small {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
}

.sp-badge--large {
  padding: 0.35rem 1rem;
  font-size: 1rem;
}

.sp-badge__remove {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.25rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.sp-badge__remove:hover {
  opacity: 1;
}

.sp-badge__remove .material-icons {
  font-size: 1em;
}

/* Alerts */
.sp-alert {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 4px solid;
  position: relative;
}

.sp-alert__icon {
  flex-shrink: 0;
}

.sp-alert__icon .material-icons {
  font-size: 1.5rem;
}

.sp-alert__content {
  flex: 1;
}

.sp-alert__title {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 700;
}

.sp-alert__text {
  margin: 0;
  line-height: 1.6;
}

.sp-alert__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.sp-alert__close:hover {
  opacity: 1;
}

.sp-alert--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: var(--md-default-fg-color);
}

.sp-alert--info .sp-alert__icon {
  color: #3b82f6;
}

.sp-alert--success {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: var(--md-default-fg-color);
}

.sp-alert--success .sp-alert__icon {
  color: #22c55e;
}

.sp-alert--warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: var(--md-default-fg-color);
}

.sp-alert--warning .sp-alert__icon {
  color: #f59e0b;
}

.sp-alert--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: var(--md-default-fg-color);
}

.sp-alert--error .sp-alert__icon {
  color: #ef4444;
}

/* Metrics */
.sp-metric {
  text-align: center;
  padding: 1.5rem;
  background: var(--md-default-bg-color);
  border-radius: 8px;
  border: 1px solid rgba(var(--md-default-fg-color), 0.1);
}

.sp-metric__icon {
  font-size: 2.5rem;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.5rem;
}

.sp-metric__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  line-height: 1.2;
}

.sp-metric__label {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.sp-metric__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.sp-metric__trend--up {
  color: #22c55e;
}

.sp-metric__trend--down {
  color: #ef4444;
}

.sp-metric--large .sp-metric__value {
  font-size: 3.5rem;
}

.sp-metric--compact {
  padding: 1rem;
}

.sp-metric--compact .sp-metric__value {
  font-size: 2rem;
}

/* Grid */
.sp-grid {
  display: grid;
  gap: 1rem;
}

.sp-grid--responsive {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

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

/* Tabs */
.sp-tabs {
  margin: 2rem 0;
}

.sp-tabs__list {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(var(--md-default-fg-color), 0.1);
  margin-bottom: 1.5rem;
}

.sp-tabs__tab {
  background: none;
  border: none;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  opacity: 0.6;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.sp-tabs__tab:hover {
  opacity: 1;
}

.sp-tabs__tab--active {
  opacity: 1;
  color: var(--md-primary-fg-color);
  border-bottom-color: var(--md-primary-fg-color);
}

.sp-tabs__panel {
  animation: fadeIn 0.3s ease;
}

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

/* Feature List */
.sp-feature-list {
  display: grid;
  gap: 2rem;
  margin: 2rem 0;
}

.sp-feature {
  display: flex;
  gap: 1rem;
}

.sp-feature__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--md-primary-fg-color), 0.1);
  border-radius: 8px;
  color: var(--md-primary-fg-color);
}

.sp-feature__icon .material-icons {
  font-size: 1.5rem;
}

.sp-feature__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.sp-feature__description {
  margin: 0;
  opacity: 0.8;
  line-height: 1.6;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .sp-card {
    padding: 1.25rem;
  }

  .sp-button {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }

  .sp-metric__value {
    font-size: 2rem;
  }

  .sp-tabs__list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sp-tabs__tab {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }

  .sp-feature-list {
    grid-template-columns: 1fr;
  }
}

/* OLD SECTION 17 REMOVED - Replaced with comprehensive section 12.5 above */

/* ========================================
   NAVIGATION DRAWER FIX - Critical!
   ======================================== */

/* CRITICAL FIX: Ensure overlay is hidden when drawer is closed */
/* This prevents the overlay from blocking clicks after drawer close */
#__drawer:not(:checked) ~ .md-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

/* Ensure overlay IS clickable when drawer is open (to close drawer) */
#__drawer:checked ~ .md-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Make sure navigation links inside drawer are always clickable */
.md-nav__link,
.md-nav__item,
.md-nav__toggle,
.md-header__button {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* Drawer behavior removed - using Material theme defaults */

/* DUPLICATE TOUCH/LANDSCAPE SECTIONS REMOVED - Already covered in section 12.5 */

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  .sp-card,
  .sp-button,
  .sp-badge {
    border-width: 0.5px;
  }

  /* Crisper text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Print Optimizations */
@media print {
  /* Remove interactive elements */
  .sp-button,
  .sp-tabs,
  .md-header,
  .md-sidebar {
    display: none !important;
  }

  /* Optimize for print */
  .sp-card {
    break-inside: avoid;
    border: 1px solid #000;
  }

  /* Black text for print */
  body {
    color: #000;
    background: #fff;
  }

  /* Show link URLs */
  .md-typeset a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Enhanced focus indicators for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--md-accent-fg-color) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Enhanced focus for navigation elements */
.md-nav__link:focus-visible,
.md-header__button:focus-visible,
.sp-button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--md-accent-fg-color) !important;
  outline-offset: 2px !important;
  background: rgba(var(--md-accent-fg-color), 0.1);
}

/* Skip to main content link (keyboard users) */
.md-skip:focus {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 1000 !important;
  padding: 1rem 2rem !important;
  background: var(--md-accent-fg-color) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Mobile adjustments for skip link */
@media screen and (max-width: 480px) {
  .md-skip:focus {
    left: 0.5rem !important;
    right: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    text-align: center !important;
  }
}

/* ========================================
   MOBILE UX ENHANCEMENTS
   ======================================== */

/* Optimize touch targets - minimum 44x44px for accessibility */
@media (max-width: 76.24em) {
  .md-nav__link,
  .md-header__button,
  .sp-button,
  button,
  a.md-button {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Better tap highlight color */
  * {
    -webkit-tap-highlight-color: rgba(var(--md-accent-fg-color), 0.2);
  }

  /* Smoother scrolling on mobile */
  html {
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small screens (320px - old iPhone SE, etc.) */
@media screen and (max-width: 374px) {
  /* Reduce header heights to save screen space */
  .sp-topnav__inner {
    padding: 0.4rem 0.75rem !important;
  }

  .sp-topnav .brand {
    font-size: 1.1rem !important;
  }

  .sp-links {
    gap: 1rem !important;
  }

  .sp-links a {
    font-size: 0.85rem !important;
  }

  .sp-cta {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  /* Smaller MkDocs header */
  .md-header__title {
    font-size: 0.9rem !important;
  }

  /* Adjust sticky sidebar top position for smaller headers */
  .md-sidebar {
    top: 6rem !important; /* Reduced from 7rem */
  }

  .md-sidebar__scrollwrap {
    max-height: calc(100vh - 6rem) !important;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for animations */
.md-sidebar,
.md-header,
.sp-topnav,
.md-nav__link,
.sp-button {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize repaints */
.md-sidebar,
.md-header {
  contain: layout style paint;
}

/* Lazy load images hint (for future image optimization) */
img {
  content-visibility: auto;
}

/* ========================================
   BACK TO TOP BUTTON ENHANCEMENT
   ======================================== */

/* Enhanced styling for MkDocs Material's built-in back-to-top button */
.md-top {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 200 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--md-primary-fg-color) !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease !important;
  padding: 0.5rem !important;
}

.md-top:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
  background: color-mix(in srgb, var(--md-primary-fg-color) 90%, white) !important;
}

.md-top:active {
  transform: translateY(-2px) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .md-top {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .md-top {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* Landscape mobile - position higher to avoid overlap */
@media (max-height: 500px) and (orientation: landscape) {
  .md-top {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ========================================
   SMOOTH TRANSITIONS & ANIMATIONS
   ======================================== */

/* Smooth transitions for interactive elements */
.md-nav__link,
.sp-button,
.md-header__button,
button,
a {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              transform 0.1s ease,
              box-shadow 0.2s ease !important;
}

/* Subtle hover effects */
.md-nav__link:hover,
.sp-button:hover {
  transform: translateY(-1px);
}

/* Disable hover transform on sidebar to prevent overlap */
.md-sidebar--primary .md-nav__link:hover {
  transform: none !important;
}

.md-nav__link:active,
.sp-button:active {
  transform: translateY(0);
}

/* Enhanced reduced motion support */
@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;
  }

  /* Disable will-change for reduced motion */
  .md-sidebar,
  .md-header,
  .sp-topnav,
  .md-nav__link,
  .sp-button {
    will-change: auto !important;
  }
}

/* ========================================
   DARK MODE OPTIMIZATIONS
   ======================================== */

/* Better contrast in dark mode for accessibility */
[data-md-color-scheme="slate"] {
  /* Ensure text meets WCAG AA standards */
  --md-typeset-color: #e8f0ff;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(255, 255, 255, 0.87);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: rgba(255, 255, 255, 1);
}

/* ========================================
   HOMEPAGE STATS GRID RESPONSIVENESS
   ======================================== */

/* Target the homepage stats grid (5 Cycle Events, 7 Indicators, etc.) */
.md-typeset div[style*="grid-template-columns"][style*="auto-fit"] {
  /* Base grid - will be overridden on smaller screens */
}

/* Tablet and below - reduce grid minimum */
@media screen and (max-width: 768px) {
  .md-typeset div[style*="grid-template-columns"][style*="auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* Reduce large stat numbers */
  .md-typeset div[style*="grid-template-columns"] div[style*="font-size: 3rem"] {
    font-size: 2.5rem !important;
  }
}

/* Mobile - stack to 2 columns */
@media screen and (max-width: 480px) {
  .md-typeset div[style*="grid-template-columns"][style*="auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    margin: 2rem 0 !important;
  }

  /* Further reduce stat numbers on small mobile */
  .md-typeset div[style*="grid-template-columns"] div[style*="font-size: 3rem"] {
    font-size: 2rem !important;
    margin-bottom: 0.3rem !important;
  }

  /* Reduce stat labels */
  .md-typeset div[style*="grid-template-columns"] div[style*="font-weight: 700"] {
    font-size: 0.85rem !important;
  }
}

/* Very small mobile - ensure readability */
@media screen and (max-width: 360px) {
  .md-typeset div[style*="grid-template-columns"][style*="auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .md-typeset div[style*="grid-template-columns"] div[style*="font-size: 3rem"] {
    font-size: 1.75rem !important;
  }

  .md-typeset div[style*="grid-template-columns"] div[style*="font-weight: 700"] {
    font-size: 0.8rem !important;
  }
}

/* ========================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   ======================================== */

/* Ensure buttons are touch-friendly on all devices */
@media (max-width: 768px) {
  .md-button,
  .md-button--primary {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}

/* Optimize card grids for mobile */
@media screen and (max-width: 640px) {
  .md-typeset .grid.cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .md-typeset .grid.cards > li {
    padding: 1rem !important;
  }
}

/* Improve spacing on very small devices */
@media screen and (max-width: 360px) {
  .md-typeset {
    font-size: 0.9rem;
  }

  .md-typeset h1 {
    font-size: 1.6rem;
  }

  .md-typeset h2 {
    font-size: 1.3rem;
  }

  .md-typeset h3 {
    font-size: 1.1rem;
  }

  .md-content__inner {
    padding: 0 0.75rem !important;
  }
}

/* Old horizontal scroll indicators removed - accordion rows don't need horizontal scrolling */

/* Settings & Alerts page specific optimizations */
@media screen and (max-width: 768px) {
  /* Ensure navigation links are easy to tap */
  .md-typeset ul li a {
    display: block;
    padding: 0.5rem 0;
    min-height: 44px;
    line-height: 1.5;
  }

  /* Optimize code blocks on mobile */
  .md-typeset pre {
    font-size: 0.8rem;
    padding: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .md-typeset code {
    font-size: 0.85em;
    word-wrap: break-word;
  }
}

/* Landscape mobile optimizations */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical padding in landscape */
  .md-content__inner {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .md-typeset h1,
  .md-typeset h2 {
    margin-top: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ========================================
   PERFORMANCE HINTS FOR PRODUCTION
   ======================================== */

/*
  PRODUCTION OPTIMIZATION CHECKLIST:

  1. Minify this CSS file (remove comments, whitespace)
  2. Enable Brotli/Gzip compression on server
  3. Add lazy loading to images in mkdocs.yml:
     - Add 'attr_list' to markdown_extensions
     - Use {loading=lazy} on img tags
  4. Enable critical CSS extraction
  5. Consider CSS purging for unused styles
  6. Add resource hints in HTML:
     - <link rel="preconnect" href="https://fonts.googleapis.com">
     - <link rel="dns-prefetch" href="https://fonts.gstatic.com">
*/

/* ========================================
   HOMEPAGE IMPROVEMENTS
   ======================================== */

/* Homepage grid layouts: Better mobile responsiveness */
@media screen and (max-width: 768px) {
  /* New User Resources section */
  #new-user-resources + div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
  }

  #new-user-resources + div[style*="grid"] > div {
    padding: 1rem !important;
  }

  #new-user-resources + div[style*="grid"] h3 {
    font-size: 0.9rem !important;
  }

  #new-user-resources + div[style*="grid"] p {
    font-size: 0.75rem !important;
  }

  #new-user-resources + div[style*="grid"] ol,
  #new-user-resources + div[style*="grid"] ul {
    font-size: 0.7rem !important;
  }

  /* Stats section (5 Cycle Events, etc.) - 2 column grid on mobile */
  #signal-pilot-suite-the-complete-cycle-system ~ div[style*="display: grid"][style*="text-align: center"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    margin: 1.5rem 0 !important;
  }

  #signal-pilot-suite-the-complete-cycle-system ~ div[style*="display: grid"][style*="text-align: center"] > div > div:first-child {
    font-size: 2rem !important;
  }

  #signal-pilot-suite-the-complete-cycle-system ~ div[style*="display: grid"][style*="text-align: center"] > div > div:last-child {
    font-size: 0.85rem !important;
  }

  /* Most Common Tasks section */
  #most-common-tasks + p + div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
  }

  #most-common-tasks + p + div[style*="grid"] > div {
    padding: 1.25rem !important;
  }

  #most-common-tasks + p + div[style*="grid"] h3 {
    font-size: 1rem !important;
  }

  #most-common-tasks + p + div[style*="grid"] p {
    font-size: 0.9rem !important;
  }

  #most-common-tasks + p + div[style*="grid"] a {
    font-size: 0.85rem !important;
    padding: 0.4rem 1.2rem !important;
  }
}

/* For tablets: show 2 columns for resource cards */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #new-user-resources + div[style*="grid"],
  #most-common-tasks + p + div[style*="grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop: Make hero section more compact for better screenshot preview */
@media screen and (min-width: 769px) {
  /* Hero section with gradient background */
  div[style*="padding: 3rem 1.5rem"][style*="gradient"] {
    padding: 2rem 1.5rem !important;
  }

  /* Hero title */
  div[style*="gradient"] h2[style*="font-size: 2.2rem"] {
    font-size: 1.8rem !important;
  }

  /* Hero subtitle */
  div[style*="gradient"] p[style*="font-size: 1.2rem"] {
    font-size: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Hero buttons */
  div[style*="gradient"] a[style*="font-size: 1.1rem"] {
    font-size: 0.95rem !important;
    padding: 0.7rem 2rem !important;
  }
}

/* Mobile sidebar title: Apply GUGI brand font */
@media screen and (max-width: 76.24em) {
  .md-nav--primary > .md-nav__title {
    font-family: var(--sp-brand-font) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
  }
}

/* Mobile header: Better spacing for buttons and text-sizing controls */
@media screen and (max-width: 76.24em) {
  /* Remove ALL header inner padding on left to push hamburger to edge */
  .md-header__inner {
    padding: 0 !important;
  }

  /* Hide logo button on mobile to save space */
  .md-header__button.md-logo {
    display: none !important;
  }

  /* Push hamburger button ABSOLUTELY to the left edge - minimal padding */
  .md-header__button.md-icon[for="__drawer"] {
    margin: 0 !important;
    padding: 0.4rem 0.2rem !important;
    order: -1 !important;
  }

  /* Reduce all other header buttons for better fit */
  .md-header__button:not([for="__drawer"]):not(.md-logo) {
    margin: 0.05rem !important;
    padding: 0.25rem !important;
  }

  /* Fix: Add small positive margin to prevent text cutoff on left edge */
  [dir=ltr] .md-header__title {
    margin-left: 0.3rem !important; /* Small positive margin to prevent cutoff */
    margin-right: 0 !important;
  }

  [dir=rtl] .md-header__title {
    margin-left: 0 !important;
    margin-right: 0.3rem !important; /* Small positive margin to prevent cutoff */
  }

  /* Make header title much smaller to fit "SIGNAL PILOT" */
  .md-header__title {
    font-size: 0.6rem !important;
    max-width: none !important;
    flex-shrink: 1 !important;
  }

  .md-header__topic {
    font-size: 0.6rem !important;
  }

  /* Make search icon EXACTLY same size as theme toggle */
  .md-header__button[for="__search"] {
    padding: 0.25rem !important;
    margin: 0.05rem !important;
  }

  .md-header__button[for="__search"] svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  /* Make palette toggle icon EXACTLY same size */
  .md-header__option[data-md-component="palette"] {
    margin: 0.05rem !important;
  }

  .md-header__option[data-md-component="palette"] label {
    padding: 0.25rem !important;
    margin: 0 !important;
  }

  .md-header__option[data-md-component="palette"] label svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  /* Fix search overlay - position BELOW header, not on top */
  .md-search {
    position: fixed !important;
    top: 3.5rem !important; /* Below header */
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important; /* Below header (header is z-index: 4) */
  }

  .md-search__overlay {
    position: fixed !important;
    top: 3.5rem !important; /* Start below header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.54) !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }

  .md-search__inner {
    background-color: var(--md-default-bg-color) !important;
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }

  /* Ensure search input is visible */
  .md-search__form {
    background-color: var(--md-default-bg-color) !important;
  }

  /* Ensure palette toggle only shows one icon at a time */
  .md-header__option[data-md-component="palette"] label:not([hidden]) {
    display: inline-block !important;
  }

  .md-header__option[data-md-component="palette"] label[hidden] {
    display: none !important;
  }
}

/* New User Resources: Fix list item formatting - force single lines */
/* Reduce UL padding to prevent overflow on mobile */
#new-user-resources + div ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#new-user-resources + div ol {
  padding-left: 0.75rem !important;
  margin-left: 0 !important;
}

/* Mobile: make lists smaller and push more to the left */
@media screen and (max-width: 768px) {
  #new-user-resources + div ul {
    padding-left: 0 !important;
    margin-left: -0.25rem !important;
  }

  #new-user-resources + div ol {
    padding-left: 0.5rem !important;
    margin-left: 0 !important;
  }

  #new-user-resources + div ul li,
  #new-user-resources + div ol li {
    font-size: 0.7rem !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

#new-user-resources + div ul li {
  display: block !important;
  list-style: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1.8 !important;
  padding-left: 0 !important;
}

/* Force all child elements to be inline */
#new-user-resources + div ul li * {
  display: inline !important;
  white-space: nowrap !important;
}

#new-user-resources + div ul li a {
  display: inline !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#new-user-resources + div ul li strong {
  display: inline !important;
  white-space: nowrap !important;
}

/* Remove any pseudo-elements that might be causing line breaks */
#new-user-resources + div ul li::before,
#new-user-resources + div ul li::after,
#new-user-resources + div ul li a::before,
#new-user-resources + div ul li a::after {
  content: none !important;
  display: none !important;
}

/* Override any Material for MkDocs link styling in these lists */
.md-typeset #new-user-resources + div ul li a,
.md-typeset #new-user-resources + div ul li a strong {
  display: inline !important;
  word-break: keep-all !important;
}

/* ========================================
   GLOBAL MOBILE CARD/GRID OPTIMIZATIONS
   Apply same logic to all card-based layouts across site
   ======================================== */

/* Mobile: Optimize ALL gradient card boxes across the entire site */
@media screen and (max-width: 768px) {
  /* Reduce padding on all gradient cards */
  div[style*="padding: 2rem"][style*="gradient"] {
    padding: 1rem !important;
  }

  /* Reduce font sizes in all gradient cards */
  div[style*="padding: 2rem"][style*="gradient"] h3 {
    font-size: 0.9rem !important;
  }

  div[style*="padding: 2rem"][style*="gradient"] p {
    font-size: 0.75rem !important;
  }

  div[style*="padding: 2rem"][style*="gradient"] ul,
  div[style*="padding: 2rem"][style*="gradient"] ol {
    font-size: 0.7rem !important;
    padding-left: 0.5rem !important;
  }

  div[style*="padding: 2rem"][style*="gradient"] li {
    font-size: 0.7rem !important;
  }

  /* Optimize all grid layouts for mobile - force single column */
  div[style*="display: grid"][style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Reduce padding on cards with 1.5rem padding too */
  div[style*="padding: 1.5rem"][style*="gradient"] {
    padding: 1rem !important;
  }
}

/* ========================================
   QUICK REFERENCE CARDS - MOBILE OPTIMIZATION
   Fix: Cards too vertical on mobile (2-column layout)
   ======================================== */

/* Mobile: Show 2 columns for quick reference cards */
@media screen and (max-width: 768px) {
  /* Target the specific quick reference cards grid */
  #quick-reference-cards + p + div[style*="display: grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Compact card styling for 2-column layout */
  #quick-reference-cards + p + div[style*="display: grid"] > div {
    padding: 0.75rem !important;
  }

  #quick-reference-cards + p + div[style*="display: grid"] > div > div[style*="font-size: 1.8rem"] {
    font-size: 1.3rem !important;
    margin-bottom: 0.25rem !important;
  }

  #quick-reference-cards + p + div[style*="display: grid"] h3 {
    font-size: 0.75rem !important;
    margin: 0 0 0.25rem 0 !important;
    line-height: 1.2 !important;
  }

  #quick-reference-cards + p + div[style*="display: grid"] p {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.5rem 0 !important;
  }

  #quick-reference-cards + p + div[style*="display: grid"] a {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.6rem !important;
  }
}

/* Extra small phones: Stack to 1 column */
@media screen and (max-width: 400px) {
  #quick-reference-cards + p + div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
   STATS GRID COMPONENT
   ======================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ========================================
   END OF CONSOLIDATED STYLES
   ======================================== */

/* ========================================
/* ========================================
/* ========================================
/* ========================================
/* ========================================

/* ========================================
   FIX: Sidebar Navigation - Prevent text cutoff when Suite section expanded
   ======================================== */

/* Prevent nested navigation from creating extra left indentation */
.md-sidebar--primary .md-nav__item .md-nav__list {
  margin-left: 0 !important;
}

/* Add proper padding to nested navigation links on desktop to prevent text cutoff */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__item .md-nav .md-nav__link {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
  }
}