/* User Provided Stylesheet */

/* 🎨 Palette: Accessibility & UX Improvements */

/* Improve focus visibility for keyboard navigation */
:focus-visible {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Add smooth scrolling for anchor links, respecting user motion preferences */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Improve link readability and accessibility by clearing descenders (only within main content) */
article a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(59, 130, 246, 0.4); /* subtle blue */
  transition: text-decoration-color 0.2s ease-in-out, text-decoration-thickness 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

article a:hover {
  text-decoration-color: rgba(59, 130, 246, 1); /* solid blue */
  text-decoration-thickness: 2px;
  opacity: 0.9;
}

/* Provide spatial context for internal anchor links (e.g. footnotes, TOC) */
:target {
  animation: highlight-target 2s ease-out forwards;
  scroll-margin-top: 5rem; /* Prevents targeted elements from sitting flush against the top edge or under sticky headers */
}

/* Ensure headings also have breathing room when deep-linked, even if not the explicit :target */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 5rem;
}

@keyframes highlight-target {
  0% {
    background-color: rgba(59, 130, 246, 0.2); /* light blue */
  }
  100% {
    background-color: transparent;
  }
}

/* Fallback for users with reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :target {
    animation: none;
    border-left: 4px solid #3b82f6;
    padding-left: 0.5rem;
    background-color: transparent;
  }
}

/* Improve readability and scannability of inline code elements */
:not(pre) > code {
  background-color: rgba(148, 163, 184, 0.15); /* subtle slate background */
  border: 1px solid rgba(148, 163, 184, 0.3); /* subtle slate border */
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.875em; /* slightly smaller to fit text line height */
  color: #c7254e; /* dark pink/red commonly used for inline code readability */
}

/* Ensure inline code styling works nicely in dark mode if body has dark class */
.dark :not(pre) > code {
  background-color: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.4);
  color: #ff8fb6; /* lighter pink for dark mode */
}

/* Improve readability and visual hierarchy of code blocks (pre elements) */
article pre.myst-code-body {
  background-color: rgba(241, 245, 249, 1) !important; /* Tailwind slate-100 */
  border: 1px solid rgba(203, 213, 225, 1) !important; /* Tailwind slate-300 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

/* Ensure code blocks look great in dark mode */
.dark article pre.myst-code-body {
  background-color: rgba(15, 23, 42, 1) !important; /* Tailwind slate-900 */
  border-color: rgba(51, 65, 85, 1) !important; /* Tailwind slate-700 */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

/* Improve focus accessibility for header actionable icon buttons and links */
.myst-top-nav-menu-button:focus-visible,
.myst-search-bar:focus-visible,
.myst-theme-button:focus-visible,
.myst-fm-github-link:focus-visible,
.myst-fm-edit-link:focus-visible,
.myst-fm-downloads-button:focus-visible,
.myst-outline-collapsible:focus-visible,
.myst-code-copy-icon:focus-visible,
.myst-fm-launch-button:focus-visible,
.myst-toc-item button:focus-visible {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 2px !important;
  border-radius: 0.375rem; /* rounded-md */
}

/* Ensure circular buttons maintain circular focus rings */
.myst-theme-button:focus-visible {
  border-radius: 9999px; /* rounded-full */
}

/* Add an interactive background color shift to footer navigational links */
.myst-footer-link {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.myst-footer-link:hover {
  background-color: rgba(241, 245, 249, 0.6); /* slate-100 semi-transparent */
}

.dark .myst-footer-link:hover {
  background-color: rgba(30, 41, 59, 0.4); /* slate-800 semi-transparent for dark mode */
}

/* Enhance the "Skip to content" link for keyboard users */
.myst-skip-to-link {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  border-radius: 0.375rem; /* rounded-md */
  text-decoration: none !important;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.myst-skip-to-link:last-child {
  margin-bottom: 0;
}

.myst-skip-to-link:focus, .myst-skip-to-link:hover {
  background-color: #3b82f6 !important;
  color: white !important;
  transform: translateY(1px);
}

.myst-skip-to-link:focus-visible {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

/* Improve horizontal tracking in data tables */
article tbody tr {
  transition: background-color 0.15s ease-in-out;
}
article tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.1); /* very subtle slate */
}

/* Improve readability and affordance of keyboard shortcut elements */
kbd {
  background-color: rgba(243, 244, 246, 1); /* Tailwind gray-100 */
  border: 1px solid rgba(209, 213, 219, 1); /* Tailwind gray-300 */
  border-radius: 0.375rem; /* Tailwind rounded-md */
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
  color: rgba(55, 65, 81, 1); /* Tailwind gray-700 */
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.08); /* Keyboard key feel */
}

/* Ensure inline code styling works nicely in dark mode if body has dark class */
.dark kbd {
  background-color: rgba(55, 65, 81, 1); /* Tailwind gray-700 */
  border-color: rgba(75, 85, 99, 1); /* Tailwind gray-600 */
  color: rgba(229, 231, 235, 1); /* Tailwind gray-200 */
  box-shadow: none; /* Flatter in dark mode for better integration, or keep a dark shadow */
}

/* 🎨 Palette: Print-friendly documentation */
@media print {
  /* Hide navigation, sidebars, footer, and interactive buttons */
  .myst-top-nav-bar,
  .myst-primary-sidebar-toc,
  .myst-primary-sidebar-topnav,
  .myst-footer-links,
  .myst-fm-block-badges,
  .myst-theme-button,
  .myst-search-bar,
  .myst-toc,
  .myst-fm-edit-link,
  .myst-fm-downloads-button,
  .myst-fm-launch-button,
  .lg\:col-margin-right {
    display: none !important;
  }

  /* Ensure a printer-friendly background and text color */
  body, main, article {
    background-color: white !important;
    color: black !important;
  }

  /* also hide the made with myst footer block thing */
  .myst-made-with-myst,
  .myst-sidebar-footer,
  aside,
  .myst-code-copy-icon {
     display: none !important;
  }
}

/* Improve scannability and visual distinction of blockquotes */
article blockquote {
  border-left: 4px solid rgba(148, 163, 184, 0.4); /* slate border */
  background-color: rgba(241, 245, 249, 0.5); /* subtle slate background */
  padding: 0.5rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0 0.25rem 0.25rem 0;
  color: rgba(55, 65, 81, 1); /* Tailwind gray-700 */
  font-style: italic;
}

/* Ensure blockquotes remain readable and distinct in dark mode */
.dark article blockquote {
  border-left-color: rgba(148, 163, 184, 0.6); /* slightly stronger slate border */
  background-color: rgba(30, 41, 59, 0.4); /* dark slate background */
  color: rgba(209, 213, 219, 1); /* Tailwind gray-300 */
}

/* Add tactile active state (press effect) and smooth transition to icon buttons */
.myst-theme-button,
.myst-top-nav-menu-button,
.myst-fm-github-link,
.myst-fm-edit-link,
.myst-fm-downloads-button,
.myst-fm-launch-button,
.myst-toc-item button,
.myst-code-copy-icon {
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

.myst-theme-button:active,
.myst-top-nav-menu-button:active,
.myst-fm-github-link:active,
.myst-fm-edit-link:active,
.myst-fm-downloads-button:active,
.myst-fm-launch-button:active,
.myst-toc-item button:active,
.myst-code-copy-icon:active {
  transform: scale(0.92) !important;
}

/* Ensure links acting as buttons display correctly for transform to apply */
.myst-fm-github-link,
.myst-fm-edit-link {
  display: inline-block;
}

/* 🎨 Palette: Text Selection Styling */
/* Improve visual cohesion by using a semi-transparent theme color for text selection */
::selection {
  background-color: rgba(59, 130, 246, 0.25); /* light blue selection */
  color: inherit;
}

.dark ::selection {
  background-color: rgba(59, 130, 246, 0.4); /* slightly darker blue for dark mode */
  color: inherit;
}