/* ============================================
   AIVC Design System - Pixel Perfect
   Steve Jobs level polish
   ============================================ */

/* Font Import - IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ----------------------------------------
   CSS Variables - Dark Mode (Default)
   ---------------------------------------- */
:root,
[data-md-color-scheme="slate"] {
  /* Backgrounds */
  --bg-black: #000000;
  --bg-dark: #0A0A0A;
  --bg-card: #1A1A1A;
  --bg-border: #2A2A2A;

  /* Text */
  --text-white: #FFFFFF;
  --text-muted: #808080;
  --text-dim: #606060;

  /* Accent */
  --accent-green: #5BC78E;
  --accent-green-hover: #4DB87F;
  --accent-green-dark: #2D8F5E;

  /* Material overrides */
  --md-default-bg-color: var(--bg-dark);
  --md-default-fg-color: var(--text-white);
  --md-default-fg-color--light: var(--text-muted);
  --md-primary-fg-color: var(--bg-black);
  --md-primary-bg-color: var(--text-white);
  --md-accent-fg-color: var(--accent-green);
  --md-typeset-a-color: var(--accent-green);
  --md-code-bg-color: var(--bg-card);
  --md-code-fg-color: var(--accent-green);

  /* Disable navigation indicator */
  --md-nav-item-indicator-color: transparent;
}

/* ----------------------------------------
   CSS Variables - Light Mode (Apple-inspired)
   ---------------------------------------- */
[data-md-color-scheme="default"] {
  /* Backgrounds - warm cream/off-white */
  --bg-black: #FFFFFF;
  --bg-dark: #FAFAF8;
  --bg-card: #FFFFFF;
  --bg-border: #E8E8E6;

  /* Text - high contrast */
  --text-white: #1A1A1A;
  --text-muted: #4A4A4A;
  --text-dim: #6A6A6A;

  /* Accent - slightly deeper green for light mode legibility */
  --accent-green: #2D8F5E;
  --accent-green-hover: #247A4E;
  --accent-green-light: #5BC78E;

  /* Material overrides */
  --md-default-bg-color: #FAFAF8;
  --md-default-bg-color--light: #FFFFFF;
  --md-default-bg-color--lighter: #F5F5F3;
  --md-default-fg-color: #1A1A1A;
  --md-default-fg-color--light: #4A4A4A;
  --md-default-fg-color--lighter: #6A6A6A;
  --md-primary-fg-color: #FFFFFF;
  --md-primary-bg-color: #1A1A1A;
  --md-accent-fg-color: #2D8F5E;
  --md-typeset-a-color: #2D8F5E;
  --md-code-bg-color: #F0F0EE;
  --md-code-fg-color: #2D8F5E;
  --md-typeset-kbd-color: #FAFAF8;
  --md-typeset-mark-color: rgba(45, 143, 94, 0.2);

  /* Disable navigation indicator */
  --md-nav-item-indicator-color: transparent;
}

/* ----------------------------------------
   Global Reset & Base
   ---------------------------------------- */
* {
  font-family: 'IBM Plex Mono', monospace !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-dark) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Header - Pure Black Bar
   ---------------------------------------- */
.md-header {
  background: var(--bg-black) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  height: 3rem;
}

.md-header__inner {
  padding: 0 1.25rem;
  height: 3rem;
}

/* Logo area */
.md-header__button.md-logo {
  padding: 0;
  margin-right: 0.75rem;
  display: flex !important;
  align-items: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
  display: block !important;
  visibility: visible !important;
}

/* Light mode - invert logo colors */
[data-md-color-scheme="default"] .md-header__button.md-logo img,
[data-md-color-scheme="default"] .md-header__button.md-logo svg {
  filter: invert(1);
}

/* Site title next to logo - ALWAYS visible */
.md-header__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 0;
}

.md-header__title .md-header__topic {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Keep the site title always visible, no animation */
.md-header__title .md-header__topic:first-child {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: relative !important;
}

.md-header__ellipsis {
  display: flex;
  align-items: center;
}

/* Hide the page title/breadcrumb that appears on scroll */
.md-header__topic:last-child:not(:first-child) {
  display: none !important;
}

/* ----------------------------------------
   Navigation Tabs - Inline Header Links
   ---------------------------------------- */
.md-tabs {
  background: var(--bg-black) !important;
  border-bottom: none !important;
  height: auto;
}

.md-tabs__list {
  margin-left: 0.5rem;
}

.md-tabs__link {
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 1;
  color: var(--text-white) !important;
  margin: 0;
  padding: 0.5rem 0.875rem;
}

.md-tabs__link:hover {
  color: var(--text-white) !important;
  opacity: 0.7;
}

.md-tabs__link--active {
  color: var(--text-white) !important;
  font-weight: 400;
}

/* Remove underline effects */
.md-tabs__link::after {
  display: none !important;
}

/* ----------------------------------------
   Search Bar
   ---------------------------------------- */
.md-search__form {
  background: var(--bg-card) !important;
  border-radius: 4px;
  border: 1px solid transparent;
}

.md-search__input {
  background: transparent !important;
  font-size: 0.8125rem;
  color: var(--text-muted) !important;
  padding: 0.5rem 2.5rem 0.5rem 2.25rem;
}

.md-search__input::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

.md-search__icon {
  color: var(--text-dim) !important;
}

/* ----------------------------------------
   Main Layout
   ---------------------------------------- */
.md-main {
  background: var(--bg-dark);
}

.md-main__inner {
  margin-top: 0;
}

/* ----------------------------------------
   Left Sidebar - NAVIGATION
   ---------------------------------------- */
.md-sidebar--primary {
  background: var(--bg-dark);
  width: 250px;
}

.md-sidebar--primary .md-sidebar__inner {
  padding: 1.5rem 0 0;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
}

/* Hide the nav title completely */
.md-nav--primary > .md-nav__title {
  display: none !important;
}

.md-nav--primary > .md-nav__title[for="__drawer"] {
  display: none !important;
}

/* Hide the top-level section title in sidebar (redundant with tabs) */
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link:first-child {
  display: none !important;
}

/* Also hide the section label that appears at the top of sidebar */
.md-nav__item--section > label.md-nav__link {
  display: none !important;
}

/* Nav list */
.md-nav--primary .md-nav__list {
  padding: 0;
}

/* Nav items */
.md-nav--primary .md-nav__item {
  padding: 0;
  line-height: 1.3;
}

/* Nav links - muted gray by default, NO borders at all */
.md-nav--primary .md-nav__link {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted) !important;
  padding: 0.25rem 1.25rem;
  margin: 0;
  border: none !important;
  display: block;
  line-height: 1.3;
  transition: color 0.15s ease;
  box-shadow: none !important;
  text-decoration: none !important;
  background: transparent !important;
}

.md-nav--primary .md-nav__link:hover {
  color: var(--text-white) !important;
  background: transparent !important;
}

/* Only highlight the ACTUAL current page link via color only */
.md-nav--primary .md-nav__link[href][aria-current="page"] {
  color: var(--accent-green) !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

/* Remove ALL borders on ALL nav elements */
.md-nav--primary .md-nav__item,
.md-nav--primary .md-nav__item--active,
.md-nav--primary .md-nav__item--nested,
.md-nav--primary .md-nav__link,
.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__item--active > .md-nav__link {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Remove indicator/underline from all items */
.md-nav--primary .md-nav__link::before,
.md-nav--primary .md-nav__link::after,
.md-nav--primary .md-nav__item::before,
.md-nav--primary .md-nav__item::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Remove any focus outlines */
.md-nav--primary .md-nav__link:focus,
.md-nav--primary .md-nav__link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide Material's navigation indicator completely */
.md-nav__indicator,
.md-nav--primary .md-nav__indicator {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Nested navigation */
.md-nav--primary .md-nav__item--nested > .md-nav {
  display: block;
}

.md-nav--primary .md-nav__item--nested > .md-nav > .md-nav__list {
  padding-left: 0;
  margin: 0;
}

/* Nested items - indented */
.md-nav--primary .md-nav__item--nested .md-nav__item .md-nav__link {
  padding-left: 2rem;
  font-size: 0.75rem;
}

/* Section labels (like "Quick Links") */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--text-muted) !important;
  font-size: 0.8125rem;
}

/* Remove toggle icons */
.md-nav__icon {
  display: none !important;
}

/* ----------------------------------------
   Right Sidebar - ON THIS PAGE
   ---------------------------------------- */
.md-sidebar--secondary {
  background: var(--bg-dark);
  width: 180px;
}

.md-sidebar--secondary .md-sidebar__inner {
  padding: 1rem 0 0;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
}

/* "ON THIS PAGE" title */
.md-nav--secondary > .md-nav__title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  padding: 0 0 0.625rem;
}

/* TOC links */
.md-nav--secondary .md-nav__link {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted) !important;
  padding: 0.3rem 0;
  line-height: 1.4;
}

.md-nav--secondary .md-nav__link:hover,
.md-nav--secondary .md-nav__link--active {
  color: var(--text-white) !important;
}

/* ----------------------------------------
   Content Area
   ---------------------------------------- */
.md-content {
  background: var(--bg-dark);
}

.md-content__inner {
  padding: 2.5rem 2rem 1.5rem;
  margin: 0;
  max-width: none;
}

/* ----------------------------------------
   Typography
   ---------------------------------------- */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* H1 - Large title */
.md-typeset h1 {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--text-white);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* H2 */
.md-typeset h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-white);
  margin: 1.25rem 0 0.375rem;
  border: none;
  padding: 0;
}

/* H3 */
.md-typeset h3 {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-white);
  margin: 1rem 0 0.25rem;
}

/* Paragraph */
.md-typeset p {
  margin: 0 0 0.625rem;
}

/* Muted subtitle text */
.md-typeset .subtitle,
.md-typeset p:first-of-type {
  color: var(--text-muted);
}

/* Links */
.md-typeset a {
  color: var(--accent-green);
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* Small muted text (like "Last updated...") */
.md-typeset small,
.md-typeset .meta {
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* ----------------------------------------
   Hero Card
   ---------------------------------------- */
.md-typeset .hero,
.md-typeset .admonition.hero,
.md-content__inner > .admonition:first-child {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 0 0 1rem;
  box-shadow: none;
}

.md-typeset .admonition-title {
  display: none !important;
}

/* ----------------------------------------
   Buttons
   ---------------------------------------- */
.md-typeset .md-button,
.md-typeset a.md-button {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none !important;
  display: inline-block;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Primary button - Green filled */
.md-typeset .md-button--primary,
.md-typeset a.md-button--primary {
  background: var(--accent-green) !important;
  color: var(--bg-black) !important;
  border: 2px solid var(--accent-green) !important;
}

.md-typeset .md-button--primary:hover {
  background: var(--accent-green-hover) !important;
  border-color: var(--accent-green-hover) !important;
}

/* Secondary button - Green outline */
.md-typeset .md-button:not(.md-button--primary),
.md-typeset a.md-button:not(.md-button--primary) {
  background: transparent !important;
  color: var(--accent-green) !important;
  border: 2px solid var(--accent-green) !important;
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background: rgba(91, 199, 142, 0.1) !important;
}

/* ----------------------------------------
   Cards / Admonitions
   ---------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  background: var(--bg-card);
  border: none;
  border-left: 2px solid var(--accent-green);
  border-radius: 0;
  box-shadow: none;
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background: transparent;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text-white);
  padding: 0;
  margin: 0 0 0.5rem;
  border: none;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  display: none;
}

/* ----------------------------------------
   Code
   ---------------------------------------- */
.md-typeset code {
  background: var(--bg-card);
  color: var(--accent-green);
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  border-radius: 4px;
  border: none;
}

.md-typeset pre {
  background: var(--bg-card);
  border-radius: 8px;
  margin: 0.75rem 0;
}

.md-typeset pre > code {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: transparent;
}

/* ----------------------------------------
   Tables
   ---------------------------------------- */
.md-typeset table:not([class]) {
  font-size: 0.6875rem;
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
  background: var(--bg-dark);
}

.md-typeset table:not([class]) th {
  background: var(--bg-card);
  color: var(--text-white);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--bg-border);
}

.md-typeset table:not([class]) td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--bg-card);
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.md-typeset table:not([class]) tr:hover td {
  background: var(--bg-card);
}

/* ----------------------------------------
   Lists
   ---------------------------------------- */
.md-typeset ul,
.md-typeset ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.md-typeset li {
  margin: 0.2rem 0;
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */
.md-footer {
  background: var(--bg-black);
  border-top: none;
}

.md-footer-meta {
  background: var(--bg-black);
}

/* ----------------------------------------
   Scrollbars - Ultra minimal
   ---------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Hide scrollbar on body but allow scrolling */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-border) transparent;
}

/* ----------------------------------------
   Selection
   ---------------------------------------- */
::selection {
  background: rgba(91, 199, 142, 0.3);
  color: var(--text-white);
}

/* ----------------------------------------
   Status Badges
   ---------------------------------------- */
.status-green, .status-complete {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-green);
  color: var(--bg-black);
}

.status-blue, .status-progress {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #3B82F6;
  color: var(--text-white);
}

.status-yellow, .status-planned {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #EAB308;
  color: var(--bg-black);
}

.status-red, .status-high {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #EF4444;
  color: var(--text-white);
}

/* ----------------------------------------
   Progress Bars
   ---------------------------------------- */
.progress-bar {
  background: var(--bg-card);
  height: 6px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-bar > div,
.progress-fill {
  background: var(--accent-green);
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* ----------------------------------------
   Mermaid Diagrams - Terminal Dark Theme
   ---------------------------------------- */
.mermaid {
  margin: 0.75rem 0;
  padding: 1rem;
  background: #0D0D0D;
  border: 1px solid #1A1A1A;
  border-radius: 4px;
  text-align: center;
}

/* Mermaid SVG container */
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Node styling - dark with green accents */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
  stroke-width: 1px !important;
}

/* Node text - high contrast */
.mermaid .node .label,
.mermaid .nodeLabel,
.mermaid .node text,
.mermaid text {
  fill: #E0E0E0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
}

/* Edge/arrow lines */
.mermaid .edgePath path,
.mermaid .flowchart-link,
.mermaid path.path {
  stroke: #5BC78E !important;
  stroke-width: 1.5px !important;
}

/* Arrow heads */
.mermaid .arrowheadPath,
.mermaid marker path {
  fill: #5BC78E !important;
  stroke: #5BC78E !important;
}

/* Edge labels */
.mermaid .edgeLabel,
.mermaid .edgeLabel rect,
.mermaid .edgeLabel span {
  background: #0D0D0D !important;
  fill: #0D0D0D !important;
  color: #808080 !important;
}

.mermaid .edgeLabel text {
  fill: #808080 !important;
}

/* Cluster/subgraph styling */
.mermaid .cluster rect {
  fill: #141414 !important;
  stroke: #2A2A2A !important;
  stroke-width: 1px !important;
}

.mermaid .cluster text,
.mermaid .cluster span {
  fill: #5BC78E !important;
  color: #5BC78E !important;
}

/* Sequence diagram */
.mermaid .actor {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
}

.mermaid .actor text {
  fill: #E0E0E0 !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: #5BC78E !important;
}

.mermaid .messageText {
  fill: #E0E0E0 !important;
}

.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: #1F2F1F !important;
  stroke: #5BC78E !important;
}

/* Sequence diagram lifeline */
.mermaid .actor-line {
  stroke: #2A2A2A !important;
}

/* Gantt chart */
.mermaid .section0,
.mermaid .section1,
.mermaid .section2,
.mermaid .section3 {
  fill: #141414 !important;
}

.mermaid .task {
  fill: #1F2F1F !important;
  stroke: #5BC78E !important;
}

.mermaid .taskText {
  fill: #E0E0E0 !important;
}

.mermaid .taskTextOutsideRight,
.mermaid .taskTextOutsideLeft {
  fill: #808080 !important;
}

.mermaid .grid .tick line {
  stroke: #2A2A2A !important;
}

.mermaid .grid path {
  stroke: #2A2A2A !important;
}

/* State diagram */
.mermaid .stateGroup rect {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
}

.mermaid .stateGroup text {
  fill: #E0E0E0 !important;
}

.mermaid .statediagram-state rect.divider {
  fill: #2A2A2A !important;
}

/* Class diagram */
.mermaid .classGroup rect {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
}

.mermaid .classGroup text,
.mermaid .classLabel text {
  fill: #E0E0E0 !important;
}

.mermaid .relation {
  stroke: #5BC78E !important;
}

/* Pie chart */
.mermaid .pieTitleText {
  fill: #E0E0E0 !important;
}

.mermaid .pieCircle {
  stroke: #0D0D0D !important;
}

/* ER diagram */
.mermaid .entityBox {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
}

.mermaid .entityLabel {
  fill: #E0E0E0 !important;
}

.mermaid .relationshipLabel {
  fill: #808080 !important;
}

.mermaid .relationshipLine {
  stroke: #5BC78E !important;
}

/* Git graph */
.mermaid .commit-id,
.mermaid .commit-msg {
  fill: #808080 !important;
}

.mermaid .branch-label {
  fill: #E0E0E0 !important;
}

/* Journey diagram */
.mermaid .journey-section rect {
  fill: #141414 !important;
}

.mermaid .journey-task rect {
  fill: #1F2F1F !important;
  stroke: #5BC78E !important;
}

/* Labels and titles */
.mermaid .titleText,
.mermaid .title {
  fill: #FFFFFF !important;
  font-weight: 500 !important;
}

/* Default/special nodes */
.mermaid .default > rect,
.mermaid .default > polygon {
  fill: #1A1A1A !important;
  stroke: #5BC78E !important;
}

/* Start/end nodes */
.mermaid [class*="start"] > circle,
.mermaid [class*="end"] > circle {
  fill: #5BC78E !important;
  stroke: #5BC78E !important;
}

/* Decision/diamond nodes */
.mermaid .decision > polygon {
  fill: #1A1A1A !important;
  stroke: #EAB308 !important;
}

/* Note styling */
.mermaid .note {
  fill: #1F1F14 !important;
  stroke: #EAB308 !important;
}

.mermaid .noteText {
  fill: #E0E0E0 !important;
}

/* ----------------------------------------
   Palette Toggle - Theme Switcher
   ---------------------------------------- */
/* Style the visible palette toggle */
label[for^="__palette"]:not([hidden]) {
  color: var(--text-white) !important;
  cursor: pointer;
  opacity: 0.8;
}

label[for^="__palette"]:not([hidden]):hover {
  opacity: 1;
}

/* ----------------------------------------
   Hide unwanted elements
   ---------------------------------------- */
.md-header__button.md-icon[for="__search"],
.md-search__icon {
  color: var(--text-muted);
}

/* Hide edit/view source button */
.md-content__button {
  display: none;
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary {
    width: 100%;
  }

  .md-content__inner {
    padding: 1rem;
  }
}

@media screen and (max-width: 60em) {
  .md-typeset h1 {
    font-size: 1.25rem;
  }

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

/* ============================================
   LIGHT MODE - Apple-Inspired Polish
   ============================================ */

/* ----------------------------------------
   Light Mode - Header
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8E8E6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__topic {
  color: #1A1A1A !important;
}

[data-md-color-scheme="default"] .md-header__button {
  color: #1A1A1A !important;
}

/* Palette toggle in light mode */
[data-md-color-scheme="default"] label.md-header__button[for^="__palette"] {
  color: #1A1A1A !important;
}

[data-md-color-scheme="default"] label.md-header__button[for^="__palette"]:hover {
  color: #2D8F5E !important;
  opacity: 1;
}

/* ----------------------------------------
   Light Mode - Navigation Tabs
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-tabs {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #4A4A4A !important;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #1A1A1A !important;
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #1A1A1A !important;
  font-weight: 500;
}

/* ----------------------------------------
   Light Mode - Search
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-search__form {
  background: #F5F5F3 !important;
  border: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-search__input {
  color: #1A1A1A !important;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: #6A6A6A !important;
}

[data-md-color-scheme="default"] .md-search__icon {
  color: #6A6A6A !important;
}

/* ----------------------------------------
   Light Mode - Left Sidebar Navigation
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-sidebar--primary {
  background: #FAFAF8 !important;
  border-right: 1px solid #E8E8E6;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__link {
  color: #4A4A4A !important;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__link:hover {
  color: #1A1A1A !important;
}

/* Light mode - only color highlight, NO borders */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link[href][aria-current="page"] {
  color: #2D8F5E !important;
  border: none !important;
  border-left: none !important;
}

/* Light mode - remove all borders on nav items */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--active,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--nested,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--active > .md-nav__link {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: #6A6A6A !important;
}

/* ----------------------------------------
   Light Mode - Right Sidebar (TOC)
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-sidebar--secondary {
  background: #FAFAF8 !important;
}

[data-md-color-scheme="default"] .md-nav--secondary > .md-nav__title {
  color: #6A6A6A !important;
}

[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link {
  color: #4A4A4A !important;
}

[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link--active {
  color: #1A1A1A !important;
}

/* ----------------------------------------
   Light Mode - Content Area
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-content {
  background: #FAFAF8 !important;
}

[data-md-color-scheme="default"] body {
  background: #FAFAF8 !important;
}

/* ----------------------------------------
   Light Mode - Typography
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-typeset {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
  color: #1A1A1A !important;
}

[data-md-color-scheme="default"] .md-typeset a {
  color: #2D8F5E;
}

[data-md-color-scheme="default"] .md-typeset a:hover {
  color: #247A4E;
}

[data-md-color-scheme="default"] .md-typeset small,
[data-md-color-scheme="default"] .md-typeset .meta {
  color: #6A6A6A;
}

/* ----------------------------------------
   Light Mode - Tables
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  background: #FAFAF8;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: #F0F0EE !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) td {
  color: #4A4A4A !important;
  border-bottom: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tr:hover td {
  background: #F5F5F3 !important;
}

/* ----------------------------------------
   Light Mode - Code
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-typeset code {
  background: #F0F0EE !important;
  color: #2D8F5E !important;
}

[data-md-color-scheme="default"] .md-typeset pre {
  background: #F0F0EE !important;
}

[data-md-color-scheme="default"] .md-typeset pre > code {
  color: #4A4A4A !important;
  background: transparent !important;
}

/* ----------------------------------------
   Light Mode - Admonitions
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details {
  background: #FFFFFF !important;
  border-left: 2px solid #2D8F5E !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="default"] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details > summary {
  color: #1A1A1A !important;
}

/* Hero card in light mode */
[data-md-color-scheme="default"] .md-typeset .hero,
[data-md-color-scheme="default"] .md-typeset .admonition.hero,
[data-md-color-scheme="default"] .md-content__inner > .admonition:first-child {
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------
   Light Mode - Buttons
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-typeset .md-button--primary,
[data-md-color-scheme="default"] .md-typeset a.md-button--primary {
  background: #2D8F5E !important;
  color: #FFFFFF !important;
  border: 2px solid #2D8F5E !important;
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover {
  background: #247A4E !important;
  border-color: #247A4E !important;
}

[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary),
[data-md-color-scheme="default"] .md-typeset a.md-button:not(.md-button--primary) {
  color: #2D8F5E !important;
  border: 2px solid #2D8F5E !important;
}

[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary):hover {
  background: rgba(45, 143, 94, 0.08) !important;
}

/* ----------------------------------------
   Light Mode - Status Badges
   ---------------------------------------- */
[data-md-color-scheme="default"] .status-green,
[data-md-color-scheme="default"] .status-complete {
  background: #2D8F5E;
  color: #FFFFFF;
}

/* ----------------------------------------
   Light Mode - Progress Bars
   ---------------------------------------- */
[data-md-color-scheme="default"] .progress-bar {
  background: #E8E8E6;
}

[data-md-color-scheme="default"] .progress-bar > div,
[data-md-color-scheme="default"] .progress-fill {
  background: #2D8F5E;
}

/* ----------------------------------------
   Light Mode - Footer
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-footer {
  background: #FFFFFF !important;
  border-top: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-footer-meta {
  background: #FFFFFF !important;
}

[data-md-color-scheme="default"] .md-footer-meta__inner {
  color: #6A6A6A !important;
}

[data-md-color-scheme="default"] .md-copyright {
  color: #6A6A6A !important;
}

/* ----------------------------------------
   Light Mode - Scrollbars
   ---------------------------------------- */
[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb {
  background: #D0D0CE;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb:hover {
  background: #B0B0AE;
}

/* ----------------------------------------
   Light Mode - Selection
   ---------------------------------------- */
[data-md-color-scheme="default"] ::selection {
  background: rgba(45, 143, 94, 0.2);
  color: #1A1A1A;
}

/* ============================================
   Light Mode - Mermaid Diagrams
   Apple-style clean and legible
   ============================================ */
[data-md-color-scheme="default"] .mermaid {
  background: #FFFFFF;
  border: 1px solid #D0D0CE;
}

/* Node styling - clean white with darker green accents */
[data-md-color-scheme="default"] .mermaid .node rect,
[data-md-color-scheme="default"] .mermaid .node circle,
[data-md-color-scheme="default"] .mermaid .node ellipse,
[data-md-color-scheme="default"] .mermaid .node polygon,
[data-md-color-scheme="default"] .mermaid .node path {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
  stroke-width: 1.5px !important;
}

/* Node text */
[data-md-color-scheme="default"] .mermaid .node .label,
[data-md-color-scheme="default"] .mermaid .nodeLabel,
[data-md-color-scheme="default"] .mermaid .node text,
[data-md-color-scheme="default"] .mermaid text {
  fill: #1A1A1A !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

/* Edge/arrow lines */
[data-md-color-scheme="default"] .mermaid .edgePath path,
[data-md-color-scheme="default"] .mermaid .flowchart-link,
[data-md-color-scheme="default"] .mermaid path.path {
  stroke: #1D6B42 !important;
  stroke-width: 1.5px !important;
}

/* Arrow heads */
[data-md-color-scheme="default"] .mermaid .arrowheadPath,
[data-md-color-scheme="default"] .mermaid marker path {
  fill: #1D6B42 !important;
  stroke: #1D6B42 !important;
}

/* Edge labels */
[data-md-color-scheme="default"] .mermaid .edgeLabel,
[data-md-color-scheme="default"] .mermaid .edgeLabel rect,
[data-md-color-scheme="default"] .mermaid .edgeLabel span {
  background: #FFFFFF !important;
  fill: #FFFFFF !important;
  color: #4A4A4A !important;
}

[data-md-color-scheme="default"] .mermaid .edgeLabel text {
  fill: #4A4A4A !important;
}

/* Cluster/subgraph styling */
[data-md-color-scheme="default"] .mermaid .cluster rect {
  fill: #F5F5F3 !important;
  stroke: #D0D0CE !important;
  stroke-width: 1px !important;
}

[data-md-color-scheme="default"] .mermaid .cluster text,
[data-md-color-scheme="default"] .mermaid .cluster span {
  fill: #1D6B42 !important;
  color: #1D6B42 !important;
}

/* Sequence diagram */
[data-md-color-scheme="default"] .mermaid .actor {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .actor text {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .messageLine0,
[data-md-color-scheme="default"] .mermaid .messageLine1 {
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .messageText {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .activation0,
[data-md-color-scheme="default"] .mermaid .activation1,
[data-md-color-scheme="default"] .mermaid .activation2 {
  fill: #D4EDDF !important;
  stroke: #1D6B42 !important;
}

/* Sequence diagram lifeline */
[data-md-color-scheme="default"] .mermaid .actor-line {
  stroke: #D0D0CE !important;
}

/* Gantt chart */
[data-md-color-scheme="default"] .mermaid .section0,
[data-md-color-scheme="default"] .mermaid .section1,
[data-md-color-scheme="default"] .mermaid .section2,
[data-md-color-scheme="default"] .mermaid .section3 {
  fill: #F5F5F3 !important;
}

[data-md-color-scheme="default"] .mermaid .task {
  fill: #D4EDDF !important;
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .taskText {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .taskTextOutsideRight,
[data-md-color-scheme="default"] .mermaid .taskTextOutsideLeft {
  fill: #4A4A4A !important;
}

[data-md-color-scheme="default"] .mermaid .grid .tick line {
  stroke: #D0D0CE !important;
}

[data-md-color-scheme="default"] .mermaid .grid path {
  stroke: #D0D0CE !important;
}

/* State diagram */
[data-md-color-scheme="default"] .mermaid .stateGroup rect {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .stateGroup text {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .statediagram-state rect.divider {
  fill: #D0D0CE !important;
}

/* Class diagram */
[data-md-color-scheme="default"] .mermaid .classGroup rect {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .classGroup text,
[data-md-color-scheme="default"] .mermaid .classLabel text {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .relation {
  stroke: #1D6B42 !important;
}

/* Pie chart */
[data-md-color-scheme="default"] .mermaid .pieTitleText {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .pieCircle {
  stroke: #FFFFFF !important;
}

/* ER diagram */
[data-md-color-scheme="default"] .mermaid .entityBox {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
}

[data-md-color-scheme="default"] .mermaid .entityLabel {
  fill: #1A1A1A !important;
}

[data-md-color-scheme="default"] .mermaid .relationshipLabel {
  fill: #4A4A4A !important;
}

[data-md-color-scheme="default"] .mermaid .relationshipLine {
  stroke: #1D6B42 !important;
}

/* Git graph */
[data-md-color-scheme="default"] .mermaid .commit-id,
[data-md-color-scheme="default"] .mermaid .commit-msg {
  fill: #4A4A4A !important;
}

[data-md-color-scheme="default"] .mermaid .branch-label {
  fill: #1A1A1A !important;
}

/* Journey diagram */
[data-md-color-scheme="default"] .mermaid .journey-section rect {
  fill: #F5F5F3 !important;
}

[data-md-color-scheme="default"] .mermaid .journey-task rect {
  fill: #D4EDDF !important;
  stroke: #1D6B42 !important;
}

/* Labels and titles */
[data-md-color-scheme="default"] .mermaid .titleText,
[data-md-color-scheme="default"] .mermaid .title {
  fill: #1A1A1A !important;
  font-weight: 500 !important;
}

/* Default/special nodes */
[data-md-color-scheme="default"] .mermaid .default > rect,
[data-md-color-scheme="default"] .mermaid .default > polygon {
  fill: #FFFFFF !important;
  stroke: #1D6B42 !important;
}

/* Start/end nodes */
[data-md-color-scheme="default"] .mermaid [class*="start"] > circle,
[data-md-color-scheme="default"] .mermaid [class*="end"] > circle {
  fill: #1D6B42 !important;
  stroke: #1D6B42 !important;
}

/* Decision/diamond nodes */
[data-md-color-scheme="default"] .mermaid .decision > polygon {
  fill: #FFFFFF !important;
  stroke: #D97706 !important;
}

/* Note styling */
[data-md-color-scheme="default"] .mermaid .note {
  fill: #FEF9E7 !important;
  stroke: #D97706 !important;
}

[data-md-color-scheme="default"] .mermaid .noteText {
  fill: #1A1A1A !important;
}

/* ============================================
   Custom Footer - Always Visible
   ============================================ */

/* Hide default MkDocs footer elements we don't need */
.md-footer-nav,
.md-footer__inner {
  display: none !important;
}

/* Custom footer container */
.custom-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-black);
  border-top: 1px solid var(--bg-border);
  z-index: 100;
  padding: 0;
}

.custom-footer__inner {
  max-width: 100%;
  padding: 0.4rem 1.5rem;
}

.custom-footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.custom-footer__section {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
}

.custom-footer__label {
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.custom-footer__value {
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}

.custom-footer__separator {
  color: var(--text-dim);
  opacity: 0.5;
}

.custom-footer__copyright {
  color: var(--text-muted);
}

.custom-footer__link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.custom-footer__link:hover {
  color: var(--accent-green);
  text-decoration: none;
}

/* Add padding to main content to prevent footer overlap */
.md-main__inner {
  padding-bottom: 3rem !important;
}

/* Responsive footer */
@media screen and (max-width: 768px) {
  .custom-footer__content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .custom-footer__section {
    justify-content: center;
  }

  .custom-footer__inner {
    padding: 0.5rem 1rem;
  }

  .md-main__inner {
    padding-bottom: 5rem !important;
  }
}

/* Light mode footer */
[data-md-color-scheme="default"] .custom-footer {
  background: #FFFFFF;
  border-top: 1px solid #E8E8E6;
}

[data-md-color-scheme="default"] .custom-footer__label {
  color: #6A6A6A;
}

[data-md-color-scheme="default"] .custom-footer__value {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .custom-footer__separator {
  color: #B0B0AE;
}

[data-md-color-scheme="default"] .custom-footer__copyright {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .custom-footer__link {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .custom-footer__link:hover {
  color: #2D8F5E;
}

/* ----------------------------------------
   Search Results - Dark Mode
   ---------------------------------------- */
.md-search__output {
  background: var(--bg-card) !important;
  border: 1px solid var(--bg-border) !important;
}

.md-search-result {
  background: var(--bg-card) !important;
}

.md-search-result__item {
  border-bottom: 1px solid var(--bg-border) !important;
}

.md-search-result__link {
  background: transparent !important;
}

.md-search-result__link:hover,
.md-search-result__link:focus {
  background: var(--bg-dark) !important;
}

.md-search-result__article {
  background: transparent !important;
}

.md-search-result__title {
  color: var(--text-white) !important;
}

.md-search-result__teaser {
  color: var(--text-muted) !important;
}

.md-search-result__meta {
  color: var(--text-dim) !important;
}

mark {
  background: rgba(91, 199, 142, 0.3) !important;
  color: var(--text-white) !important;
}

/* ----------------------------------------
   Search Results - Light Mode
   ---------------------------------------- */
[data-md-color-scheme="default"] .md-search__output {
  background: #FFFFFF !important;
  border: 1px solid #E8E8E6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-md-color-scheme="default"] .md-search-result {
  background: #FFFFFF !important;
}

[data-md-color-scheme="default"] .md-search-result__item {
  border-bottom: 1px solid #E8E8E6 !important;
}

[data-md-color-scheme="default"] .md-search-result__link {
  background: transparent !important;
}

[data-md-color-scheme="default"] .md-search-result__link:hover,
[data-md-color-scheme="default"] .md-search-result__link:focus {
  background: #F5F5F3 !important;
}

[data-md-color-scheme="default"] .md-search-result__article {
  background: transparent !important;
}

[data-md-color-scheme="default"] .md-search-result__title {
  color: #1A1A1A !important;
}

[data-md-color-scheme="default"] .md-search-result__teaser {
  color: #4A4A4A !important;
}

[data-md-color-scheme="default"] .md-search-result__meta {
  color: #6A6A6A !important;
}

[data-md-color-scheme="default"] mark {
  background: rgba(45, 143, 94, 0.2) !important;
  color: #1A1A1A !important;
}

/* ----------------------------------------
   Grid Cards - Home Page
   ---------------------------------------- */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.grid.cards > ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid.cards > ul > li,
.grid.cards > li,
.grid.cards > * > li {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  padding: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid.cards > ul > li:hover,
.grid.cards > li:hover,
.grid.cards > * > li:hover {
  border-color: var(--accent-green);
}

.grid.cards li strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-white);
}

.grid.cards li hr {
  border: none;
  border-top: 1px solid var(--bg-border);
  margin: 0.75rem 0;
}

.grid.cards li p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

.grid.cards li a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--accent-green) !important;
  text-decoration: none;
  margin-top: 0.5rem;
}

.grid.cards li a:hover {
  text-decoration: underline;
}

/* Light mode grid cards */
[data-md-color-scheme="default"] .grid.cards > ul > li,
[data-md-color-scheme="default"] .grid.cards > li,
[data-md-color-scheme="default"] .grid.cards > * > li {
  background: #FFFFFF;
  border: 1px solid #E8E8E6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="default"] .grid.cards > ul > li:hover,
[data-md-color-scheme="default"] .grid.cards > li:hover,
[data-md-color-scheme="default"] .grid.cards > * > li:hover {
  border-color: #2D8F5E;
}

[data-md-color-scheme="default"] .grid.cards li strong {
  color: #1A1A1A;
}

[data-md-color-scheme="default"] .grid.cards li hr {
  border-top-color: #E8E8E6;
}

[data-md-color-scheme="default"] .grid.cards li p {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .grid.cards li a {
  color: #2D8F5E !important;
}