:root {
    /* your font stack from earlier */
    --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --md-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono",
                    "DejaVu Sans Mono", Consolas, "Courier New", monospace;
  
    /* Base typeset size (Material reads this) */
    --md-typeset-font-size: 1rem;        /* ~16px */
  
    /* Optional: scale up a bit on wider screens */
    @media (min-width: 768px) {
      --md-typeset-font-size: 1.0625rem; /* ~17px */
    }
    @media (min-width: 1024px) {
      --md-typeset-font-size: 1.125rem;  /* ~18px */
    }
    
    /* Custom accordion variables */
    --accordion-border-color: rgba(0, 0, 0, 0.1);
    --accordion-chevron-color: currentColor;
  }
  
  /* Improve readability */
  .md-typeset {
    line-height: 1.7;
    letter-spacing: 0.01em;
  }
  
  /* Code slightly smaller than body, but readable */
  .md-typeset code,
  .md-typeset pre code {
    font-family: var(--md-code-font);
    font-size: 0.95em;
  }
  
  /* Navigation a touch larger too (optional) */
  .md-nav {
    font-size: 0.95rem;
  }
  

.md-typeset h1, .md-typeset h2, .md-typeset h3  {
    font-weight: 700;
    letter-spacing: -.01em;
}


.md-nav {
    font-size: 0.90rem;
    line-height: 2.3;
}

.md-typeset .admonition, .md-typeset details {
    font-size: 0.8rem;
}
/* --- Preferred: bump sidebar width via custom property (Material v9+) --- */
@media (min-width: 76.25em) { /* ≈ 1220px, desktop breakpoint used by Material */
  :root {
    /* try 18–22rem to taste */
    --md-sidebar-width: 15rem;          /* primary (left) sidebar */
  }
}

/* --- Fallback: for older Material builds that ignore the variable --- */
@media (min-width: 76.25em) {
  /* widen the left sidebar block */
  .md-sidebar--primary {
    width: 15rem;
    flex: 0 0 15rem;
  }
}

/* Optional: let long titles wrap rather than ellipsize */
.md-nav__link {
  white-space: normal;  /* allow multi-line in the nav */
}

label.md-nav__title {
  display: none;
}

/* Only affect the left (primary) sidebar */
.md-sidebar--primary .md-nav__link {
  display: inline-flex;         /* keep link semantics but allow centering */
  align-items: center;          /* vertically center svg + text */
  gap: .5rem;                   /* space between icon and text */
}

/* Ensure the SVG behaves like an icon next to text */
.md-sidebar--primary .md-nav__link > svg {
  width: 1.1em;                 /* scale with text size */
  height: 1.1em;
  flex: 0 0 auto;
  vertical-align: middle;       /* backup alignment for non-flex contexts */
  display: inline-block;
}

/* Let long titles wrap nicely next to the icon (optional) */
.md-sidebar--primary .md-nav__link .md-ellipsis {
  white-space: normal;          /* allow multi-line titles */
}

/* Shadcn-style Accordion (Details) */

/* Remove the default border and box shadow */
.md-content__inner .md-typeset details,
.md-content .md-typeset details,
.md-typeset details {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

/* Style the summary element (accordion header) */
.md-content__inner .md-typeset details > summary,
.md-content .md-typeset details > summary,
.md-typeset details > summary {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 1rem 0 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--accordion-border-color) !important;
  position: relative !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  min-height: 3rem !important;
  list-style: none !important;
  transition: text-decoration 0.2s ease !important;
}

/* Add hover effect with underline instead of color change */
.md-content__inner .md-typeset details > summary:hover,
.md-content .md-typeset details > summary:hover,
.md-typeset details > summary:hover {
  text-decoration: underline !important;
}

/* Hide all default markers and icons */
.md-content__inner .md-typeset details > summary::before,
.md-content .md-typeset details > summary::before,
.md-typeset details > summary::before,
.md-content__inner .md-typeset details > summary::after,
.md-content .md-typeset details > summary::after,
.md-typeset details > summary::after {
  display: none !important;
}

/* Add custom chevron icon using an appended span */
.md-content__inner .md-typeset details > summary,
.md-content .md-typeset details > summary,
.md-typeset details > summary {
  position: relative !important;
}

.md-content__inner .md-typeset details > summary:hover .chevron-icon,
.md-content .md-typeset details > summary:hover .chevron-icon,
.md-typeset details > summary:hover .chevron-icon {
  opacity: 0.8 !important;
}

/* Add the chevron icon using a class we'll add with JavaScript */
.chevron-icon {
  display: flex !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform 0.2s !important;
  color: inherit !important; /* Ensure it inherits text color */
}

.chevron-icon svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Rotate the chevron when open */
.md-content__inner .md-typeset details[open] .chevron-icon,
.md-content .md-typeset details[open] .chevron-icon,
.md-typeset details[open] .chevron-icon {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* This is now handled in the chevron-icon class */

/* Style the content area */
.md-content__inner .md-typeset details > .md-typeset,
.md-content .md-typeset details > .md-typeset,
.md-typeset details > .md-typeset {
  padding: 1rem 0 !important;
  margin: 0 !important;
  animation: accordionContent 0.2s ease-out !important;
  position: relative !important;
}

/* Add border to all details elements by default */
.md-content__inner .md-typeset details,
.md-content .md-typeset details,
.md-typeset details {
  position: relative !important;
  border-bottom: 1px solid var(--accordion-border-color) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove default border from summary */
.md-content__inner .md-typeset details > summary,
.md-content .md-typeset details > summary,
.md-typeset details > summary {
  border-bottom: none !important;
}

/* Style for open accordion content */
.md-content__inner .md-typeset details[open] > .md-typeset,
.md-content .md-typeset details[open] > .md-typeset,
.md-typeset details[open] > .md-typeset {
  padding-bottom: 1rem !important;
}

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

/* Remove the default margin from the first element in content */
.md-content__inner .md-typeset details > .md-typeset > :first-child,
.md-content .md-typeset details > .md-typeset > :first-child,
.md-typeset details > .md-typeset > :first-child {
  margin-top: 0 !important;
}

/* Remove the default margin from the last element in content */
.md-content__inner .md-typeset details > .md-typeset > :last-child,
.md-content .md-typeset details > .md-typeset > :last-child,
.md-typeset details > .md-typeset > :last-child {
  margin-bottom: 0 !important;
}

/* Group accordions together with proper spacing */
.md-content__inner .md-typeset details + details,
.md-content .md-typeset details + details,
.md-typeset details + details {
  margin-top: 0 !important;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  --accordion-border-color: rgba(255, 255, 255, 0.1);
}