/* ============================================================================
   PatternDojo Design System
   Custom overrides for MkDocs Material — DESIGN.md is the source of truth.
   Influences: Mintlify (60%), Stripe (25%), Linear (15%)
   ============================================================================ */


/* ----------------------------------------------------------------------------
   0. Font Loading — Inter + Geist Mono (self-hosted via Google Fonts CDN)
   DESIGN.md §3.1: Inter 400/500/600 for UI, Geist Mono 400 for code
   ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400&display=swap');


/* ----------------------------------------------------------------------------
   1. CSS Custom Properties — Design Tokens
   DESIGN.md §2, §4, §5: Colors, spacing, radii
   ---------------------------------------------------------------------------- */

:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="default"][data-md-color-primary="indigo"],
[data-md-color-scheme="default"][data-md-color-accent="indigo"] {
  /* -- Brand & Accent (§2.1) -- */
  --color-primary:        #4F46E5;
  --color-primary-hover:  #6366F1;
  --color-primary-press:  #4338CA;
  --color-primary-subtle: #EEF2FF;

  /* -- Surface (§2.2) -- */
  --color-canvas:       #FFFFFF;
  --color-surface:      #F8FAFC;
  --color-surface-soft: #F1F5F9;
  --color-surface-code: #0F172A;
  --color-hairline:     #E2E8F0;
  --color-hairline-soft:#F1F5F9;

  /* -- Text (§2.3) -- */
  --color-ink:          #0F172A;
  --color-ink-secondary:#475569;
  --color-ink-muted:    #94A3B8;
  --color-ink-disabled: #CBD5E1;
  --color-code-ink:     #F8FAFC;

  /* -- Neutral (§2.4) -- */
  --color-on-primary:   #FFFFFF;

  /* -- Semantic (§2.5) -- */
  --color-success:      #10B981;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;

  /* -- Opacity (§2.6) -- */
  --alpha-subtle:       0.08;
  --alpha-medium:       0.12;
  --alpha-strong:       0.16;

  /* -- Spacing (§4) -- */
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-xxxl:  64px;
  --space-section: 96px;

  /* -- Border Radius (§5) -- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* -- Elevation (§6) -- */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 24px 48px rgba(0,0,0,0.12);

  /* -- Material overrides -- */
  --md-primary-fg-color:        var(--color-primary);
  --md-primary-fg-color--light: var(--color-primary-subtle);
  --md-primary-fg-color--dark:  var(--color-primary-press);
  --md-primary-bg-color:        var(--color-on-primary);
  --md-accent-fg-color:         var(--color-primary);
  --md-accent-fg-color--transparent: rgba(79, 70, 229, 0.12);

  --md-default-fg-color:               var(--color-ink);
  --md-default-fg-color--light:         var(--color-ink-secondary);
  --md-default-fg-color--lighter:       var(--color-ink-muted);
  --md-default-fg-color--lightest:      var(--color-ink-disabled);
  --md-default-bg-color:                var(--color-canvas);
  --md-default-bg-color--light:         var(--color-surface);
  --md-default-bg-color--lighter:       var(--color-surface-soft);
  --md-default-bg-color--lightest:      var(--color-hairline-soft);

  --md-code-fg-color:                   var(--color-code-ink);
  --md-code-bg-color:                   var(--color-surface-code);
  --md-code-hl-color:                   rgba(79, 70, 229, 0.12);

  --md-typeset-color:                   var(--color-ink);
  --md-typeset-a-color:                 var(--color-primary);

  --md-footer-fg-color:                 var(--color-ink-secondary);
  --md-footer-fg-color--light:          var(--color-ink-muted);
  --md-footer-fg-color--lighter:        var(--color-ink-disabled);
  --md-footer-bg-color:                 var(--color-surface);
  --md-footer-bg-color--dark:           var(--color-surface-soft);
}


/* -- Dark mode tokens (§2, §10) -- */

[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-md-color-primary="indigo"],
[data-md-color-scheme="slate"][data-md-color-accent="indigo"] {
  --color-primary:        #818CF8;
  --color-primary-hover:  #A5B4FC;
  --color-primary-press:  #6366F1;
  --color-primary-subtle: rgba(129, 140, 248, 0.12);

  --color-canvas:       #0A0A0B;
  --color-surface:      #111113;
  --color-surface-soft: #161618;
  --color-surface-code: #111827;
  --color-hairline:     #232529;
  --color-hairline-soft:#1C1E21;

  --color-ink:          #F1F5F9;
  --color-ink-secondary:#94A3B8;
  --color-ink-muted:    #64748B;
  --color-ink-disabled: #334155;
  --color-code-ink:     #F1F5F9;

  --color-on-primary:   #0A0A0B;

  --color-success:      #34D399;
  --color-warning:      #FBBF24;
  --color-error:        #F87171;

  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-3: 0 24px 48px rgba(0,0,0,0.6);

  --md-primary-fg-color:        var(--color-primary);
  --md-primary-fg-color--light: var(--color-primary-subtle);
  --md-primary-fg-color--dark:  var(--color-primary-press);
  --md-primary-bg-color:        var(--color-on-primary);
  --md-accent-fg-color:         var(--color-primary);
  --md-accent-fg-color--transparent: rgba(129, 140, 248, 0.12);

  --md-default-fg-color:               var(--color-ink);
  --md-default-fg-color--light:         var(--color-ink-secondary);
  --md-default-fg-color--lighter:       var(--color-ink-muted);
  --md-default-fg-color--lightest:      var(--color-ink-disabled);
  --md-default-bg-color:                var(--color-canvas);
  --md-default-bg-color--light:         var(--color-surface);
  --md-default-bg-color--lighter:       var(--color-surface-soft);
  --md-default-bg-color--lightest:      var(--color-hairline-soft);

  --md-code-fg-color:                   var(--color-code-ink);
  --md-code-bg-color:                   var(--color-surface-code);
  --md-code-hl-color:                   rgba(129, 140, 248, 0.12);

  --md-typeset-color:                   var(--color-ink);
  --md-typeset-a-color:                 var(--color-primary);

  --md-footer-fg-color:                 var(--color-ink-secondary);
  --md-footer-fg-color--light:          var(--color-ink-muted);
  --md-footer-fg-color--lighter:        var(--color-ink-disabled);
  --md-footer-bg-color:                 var(--color-surface);
  --md-footer-bg-color--dark:           var(--color-surface-soft);

  color-scheme: dark;
}


/* ----------------------------------------------------------------------------
   2. Typography
   DESIGN.md §3: Inter for body/UI, Geist Mono for code
   ---------------------------------------------------------------------------- */

:root {
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* Body text — 16px / 1.60 line-height (§3.2, §3.3) */
.md-typeset {
  font-size: 16px;
  line-height: 1.60;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading hierarchy (§3.2) — weight 600 ceiling (§3.3) */
.md-typeset h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

.md-typeset h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--color-ink);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

.md-typeset h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: 0;
  color: var(--color-ink);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.md-typeset h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.40;
  letter-spacing: 0;
  color: var(--color-ink);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-sm);
}

/* Paragraphs — body (§3.2) */
.md-typeset p {
  margin-bottom: var(--space-lg);
}

/* Lead paragraph — body-lg (§3.2) */
.md-typeset > p:first-of-type {
  font-size: 18px;
  line-height: 1.60;
  color: var(--color-ink-secondary);
}

/* Lists — sm spacing between items (§8.6) */
.md-typeset ul,
.md-typeset ol {
  margin-bottom: var(--space-lg);
}

.md-typeset li {
  margin-bottom: var(--space-sm);
}

.md-typeset li:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------------------------------------
   3. Links
   DESIGN.md §9.2: Primary color, underline on focus, no visited change
   ---------------------------------------------------------------------------- */

.md-typeset a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

.md-typeset a:hover {
  color: var(--color-primary-hover);
}

/* Body links need underline for accessibility — colour alone isn't enough (§9.2) */
.md-typeset p a,
.md-typeset li a {
  text-decoration: underline;
  text-decoration-color: rgba(79, 70, 229, 0.3);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Hide heading permalink icon until hover */
.md-typeset .headerlink {
  color: transparent !important;
  transition: color 150ms ease;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink {
  color: var(--color-ink-muted) !important;
}

[data-md-color-scheme="slate"] .md-typeset p a,
[data-md-color-scheme="slate"] .md-typeset li a {
  text-decoration-color: rgba(129, 140, 248, 0.3);
}

.md-typeset p a:hover,
.md-typeset li a:hover {
  text-decoration-color: var(--color-primary-hover);
}


/* ----------------------------------------------------------------------------
   4. Header
   DESIGN.md: Clean, minimal, surface background
   ---------------------------------------------------------------------------- */

.md-header {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-hairline);
}

/* Remove Material's built-in shadow toggle — use hairline instead */
.md-header--shadow {
  box-shadow: 0 1px 0 var(--color-hairline);
}

.md-header[data-md-state="shadow"] {
  box-shadow: var(--shadow-1);
}

.md-header__title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.md-header__button {
  color: var(--color-ink);
}

.md-header__button:hover {
  opacity: 0.7;
}

/* Logo / site title */
.md-header .md-logo {
  color: var(--color-ink);
}

.md-header .md-logo svg {
  fill: var(--color-primary);
}

/* Search icon in header */
.md-header .md-search__icon {
  color: var(--color-ink-secondary);
}

/* Palette toggle button */
.md-header__option .md-icon {
  color: var(--color-ink-secondary);
}


/* ----------------------------------------------------------------------------
   5. Sidebar Navigation
   DESIGN.md §7.7: Mint-style nav with left-border active indicator
   ---------------------------------------------------------------------------- */

.md-sidebar {
  background-color: var(--color-canvas);
}

.md-sidebar__inner {
  padding-right: var(--space-md);
}

/* Nav list items — body-sm (§3.2) */
.md-nav__item .md-nav__link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.50;
  color: var(--color-ink-secondary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
  border-left: 2px solid transparent;
  margin-left: 0;
}

/* Hover state — surface tint (§7.7) */
.md-nav__item .md-nav__link:hover {
  background-color: var(--color-surface);
  color: var(--color-ink);
}

/* Active state — left border indicator (§7.7) */
.md-nav__item .md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-weight: 500;
  border-left-color: var(--color-primary);
}

/* Section headers — micro-uppercase (§3.2) */
.md-nav__title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: var(--space-md) var(--space-md) var(--space-xs);
}

/* Nested nav depth indicators */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 500;
  color: var(--color-ink);
}


/* ----------------------------------------------------------------------------
   6. Table of Contents (right sidebar)
   ---------------------------------------------------------------------------- */

.md-nav--secondary .md-nav__link {
  font-size: 13px;
  color: var(--color-ink-muted);
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--color-ink-secondary);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 500;
}

.md-nav--secondary > .md-nav__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
}


/* ----------------------------------------------------------------------------
   7. Content Area — Reading Width & Spacing
   DESIGN.md §8.1, §8.2: 720px max content, generous whitespace
   ---------------------------------------------------------------------------- */

.md-content {
  max-width: 100%;
}

/* Cap reading width at 720px (§8.2) */
.md-typeset {
  max-width: 720px;
}

/* Section rhythm (§8.6) */
.md-typeset > h2 ~ h2 {
  margin-top: var(--space-xxl);
}


/* ----------------------------------------------------------------------------
   8. Code Blocks & Inline Code
   DESIGN.md §7.4: Dark surface-code, code-ink text
   ---------------------------------------------------------------------------- */

/* Code block container */
.md-typeset pre {
  background-color: var(--color-surface-code);
  border-radius: var(--radius-md);
  padding: 0;
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.md-typeset pre > code {
  font-family: var(--md-code-font);
  font-size: 14px;
  line-height: 1.50;
  color: var(--color-code-ink);
  background-color: transparent;
  padding: var(--space-md);
  border-radius: 0;
  border: none;
  display: block;
  overflow-x: auto;
  white-space: pre;
}

/* Inline code (§7.4) */
.md-typeset code:not(pre code) {
  font-family: var(--md-code-font);
  font-size: 13px;
  line-height: 1.40;
  color: var(--color-ink);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  word-break: break-word;
}

/* Inline code inside links must NOT inherit link color (§7.4) */
.md-typeset a code {
  color: var(--color-ink);
}

/* Code copy button — ghost style (§7.4 Code Interaction) */
.md-typeset .md-clipboard {
  color: var(--color-ink-muted);
  transition: color 150ms ease;
}

.md-typeset .md-clipboard:hover {
  color: var(--color-ink);
}

/* Copy success state */
.md-typeset .md-clipboard::after {
  color: var(--color-success);
}

/* Line numbers — ink-muted (§7.4) */
.md-typeset pre .linenodiv {
  color: var(--color-ink-muted);
}

/* Code block highlight */
.md-typeset .highlight .hll {
  background-color: rgba(79, 70, 229, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset .highlight .hll {
  background-color: rgba(129, 140, 248, 0.12);
}


/* ----------------------------------------------------------------------------
   9. Tables
   DESIGN.md §7.6: Stripe-inspired clean tables
   ---------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  margin-bottom: var(--space-lg);
}

.md-typeset table:not([class]) thead {
  background-color: var(--color-surface);
}

.md-typeset table:not([class]) th {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.50;
  color: var(--color-ink-secondary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-hairline);
  text-align: left;
  white-space: nowrap;
}

.md-typeset table:not([class]) td {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.50;
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-hairline-soft);
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* Tabular numbers for numeric columns */
.md-typeset table:not([class]) td:first-child {
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------------
   10. Admonitions / Callouts
   DESIGN.md §7.5: Stripe-style left-border callouts
   ---------------------------------------------------------------------------- */

/* Base admonition reset */
.md-typeset .admonition,
.md-typeset details {
  border: none;
  border-left: 4px solid;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: none;
  font-size: 14px;
}

/* Hide overlapping Material icons */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  display: none !important;
}

.md-typeset .admonition .admonition-title,
.md-typeset details summary {
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  margin: 0 0 var(--space-xs) 0;
  border: none;
  background: none;
}

.md-typeset .admonition p:last-child,
.md-typeset details p:last-child {
  margin-bottom: 0;
}

/* Tip — primary-subtle + primary border (§7.5) */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: var(--color-primary-subtle);
  border-left-color: var(--color-primary);
}

.md-typeset .admonition.tip .admonition-title,
.md-typeset details.tip summary {
  color: var(--color-primary);
}

.md-typeset .admonition.tip .admonition-title::before,
.md-typeset details.tip summary::before {
  background-color: var(--color-primary);
}

/* Note — surface-soft + ink-secondary border (§7.5) */
.md-typeset .admonition.note,
.md-typeset details.note {
  background-color: var(--color-surface-soft);
  border-left-color: var(--color-ink-secondary);
}

.md-typeset .admonition.note .admonition-title,
.md-typeset details.note summary {
  color: var(--color-ink-secondary);
}

.md-typeset .admonition.note .admonition-title::before,
.md-typeset details.note summary::before {
  background-color: var(--color-ink-secondary);
}

/* Warning — alpha-subtle tint + warning border (§7.5) */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  background-color: rgba(245, 158, 11, 0.08);
  border-left-color: var(--color-warning);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  background-color: rgba(251, 191, 36, 0.08);
}

.md-typeset .admonition.warning .admonition-title,
.md-typeset details.warning summary {
  color: var(--color-warning);
}

.md-typeset .admonition.warning .admonition-title::before,
.md-typeset details.warning summary::before {
  background-color: var(--color-warning);
}

/* Danger — alpha-subtle tint + error border (§7.5) */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  background-color: rgba(239, 68, 68, 0.08);
  border-left-color: var(--color-error);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  background-color: rgba(248, 113, 113, 0.08);
}

.md-typeset .admonition.danger .admonition-title,
.md-typeset details.danger summary {
  color: var(--color-error);
}

.md-typeset .admonition.danger .admonition-title::before,
.md-typeset details.danger summary::before {
  background-color: var(--color-error);
}


/* ----------------------------------------------------------------------------
   11. Buttons
   DESIGN.md §7.1: Linear-inspired pill buttons
   ---------------------------------------------------------------------------- */

/* Primary button — pill-shaped CTA (§7.1) */
.md-typeset .md-button--primary,
.md-typeset a.md-button--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.20;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: none;
  height: 36px;
  display: inline-flex;
  align-items: center;
  transition: background-color 150ms ease, transform 200ms ease-out;
  text-decoration: none;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.md-typeset .md-button--primary:active {
  background-color: var(--color-primary-press);
  transform: scale(0.98);
}

/* Secondary button — outlined pill (§7.1) */
.md-typeset .md-button,
.md-typeset a.md-button {
  background-color: transparent;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.20;
  padding: 8px 20px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  height: 36px;
  display: inline-flex;
  align-items: center;
  transition: background-color 150ms ease;
  text-decoration: none;
}

.md-typeset .md-button:hover {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-hairline);
}


/* ----------------------------------------------------------------------------
   12. Search
   DESIGN.md §7.8: Clean search with md radius
   ---------------------------------------------------------------------------- */

.md-search__form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  height: 36px;
}

.md-search__input {
  font-size: 14px;
  color: var(--color-ink);
  background-color: transparent;
}

.md-search__input::placeholder {
  color: var(--color-ink-muted);
}

/* Search overlay — Level 3 elevation (§7.8) */
.md-search__output {
  background-color: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

.md-search-result__link:hover {
  background-color: var(--color-surface);
}

/* Focus state for search (§9.4) */
.md-search__form:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}


/* ----------------------------------------------------------------------------
   13. Focus States
   DESIGN.md §9.4, §12: 2px primary outline + 2px offset
   ---------------------------------------------------------------------------- */

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove outlines on non-keyboard focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Specific component focus overrides */
.md-nav__link:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* ----------------------------------------------------------------------------
   14. Footer
   DESIGN.md: Clean, surface-based footer
   ---------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--color-surface);
  color: var(--color-ink-secondary);
  border-top: 1px solid var(--color-hairline);
}

.md-footer-meta {
  background-color: var(--color-surface-soft);
}

.md-footer a {
  color: var(--color-ink-secondary);
}

.md-footer a:hover {
  color: var(--color-primary);
}

.md-copyright {
  color: var(--color-ink-muted);
  font-size: 13px;
}

.md-copyright a {
  color: var(--color-ink-secondary);
}

.md-copyright a:hover {
  color: var(--color-primary);
}

/* Prev/next navigation in footer */
.md-footer__link {
  padding: var(--space-lg) var(--space-md);
}

.md-footer__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.md-footer__direction {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.md-footer__button {
  color: var(--color-ink-secondary);
}


/* ----------------------------------------------------------------------------
   15. Transitions & Motion
   DESIGN.md §9.1: Restrained, purposeful motion
   ---------------------------------------------------------------------------- */

/* Reduced motion — disable all transitions (§12, Motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}


/* ----------------------------------------------------------------------------
   16. Scroll Margin for Anchor Links
   Web Interface Guidelines: scroll-margin-top on heading anchors
   ---------------------------------------------------------------------------- */

.md-typeset [id] {
  scroll-margin-top: 80px;
}


/* ----------------------------------------------------------------------------
   17. Responsive Behavior
   DESIGN.md §11: Mobile-first adjustments
   ---------------------------------------------------------------------------- */

/* -- Mobile (< 768px) -- */
@media screen and (max-width: 767px) {
  .md-typeset h1 {
    font-size: 30px;
  }

  .md-typeset h2 {
    font-size: 24px;
    margin-top: var(--space-xxl);
  }

  /* Section spacing reduces 96 -> 64 (§11) */
  .md-typeset > h2 ~ h2 {
    margin-top: var(--space-xxl);
  }

  /* Page horizontal padding: 16px (§11) */
  .md-main__inner {
    padding: 0 var(--space-md);
  }

  .md-content__inner {
    padding: var(--space-lg) 0;
  }
}

/* -- Tablet (768px – 1200px) -- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .md-typeset h1 {
    font-size: 32px;
  }

  .md-typeset h2 {
    font-size: 26px;
  }
}


/* ----------------------------------------------------------------------------
   18. Page Background & Main Content Area
   ---------------------------------------------------------------------------- */

body {
  background-color: var(--color-canvas);
}

.md-main {
  background-color: var(--color-canvas);
}

/* Content divider between sections */
.md-typeset hr {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-xxl) 0;
}


/* ----------------------------------------------------------------------------
   19. Dark Mode Specifics
   DESIGN.md §10: Surface ladder, no shadows on flat elements
   ---------------------------------------------------------------------------- */

/* Ensure dark mode uses surface-code that's lighter than canvas (§10) */
[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: var(--color-surface-code);
}

[data-md-color-scheme="slate"] .md-typeset code:not(pre code) {
  background-color: var(--color-surface-soft);
  border-color: var(--color-hairline);
  color: var(--color-ink);
}

/* Dark header */
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--color-canvas);
  box-shadow: 0 1px 0 var(--color-hairline);
}

/* Dark sidebar */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: var(--color-canvas);
}

/* Dark search */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: var(--color-surface);
  border-color: var(--color-hairline);
}

/* Dark footer */
[data-md-color-scheme="slate"] .md-footer {
  background-color: var(--color-surface);
  border-top-color: var(--color-hairline);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: var(--color-canvas);
}


/* ----------------------------------------------------------------------------
   20. Back-to-top Button
   ---------------------------------------------------------------------------- */

.md-top {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  font-weight: 500;
}

.md-top:hover {
  background-color: var(--color-primary-hover);
}


/* ----------------------------------------------------------------------------
   21. Touch Targets
   DESIGN.md §12: Minimum 44px mobile, 36px desktop
   ---------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .md-nav__link,
  .md-search__icon {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Target header buttons carefully to avoid breaking theme toggle display logic */
  .md-header__button:not([for^="__palette_"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ----------------------------------------------------------------------------
   22. Pattern Page — Prev/Next Navigation Links
   Stripe-style inline navigation
   ---------------------------------------------------------------------------- */

/* Container for the 3-column layout */
.md-typeset .pattern-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  padding-bottom: 0;
}

/* Each column takes EXACTLY 1/3 of the space regardless of content length */
.md-typeset .pattern-nav-prev,
.md-typeset .pattern-nav-center,
.md-typeset .pattern-nav-next {
  flex: 1 1 0%;
  display: flex;
  min-width: 0;
}

/* Alignment per column */
.md-typeset .pattern-nav-prev {
  justify-content: flex-start;
  text-align: left;
}

.md-typeset .pattern-nav-center {
  justify-content: center;
  text-align: center;
}

.md-typeset .pattern-nav-next {
  justify-content: flex-end;
  text-align: right;
}

/* Link styling */
.md-typeset .pattern-nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.4;
  /* Ensure long links don't break the grid */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-typeset .pattern-nav a:hover {
  color: var(--color-primary-hover);
}

/* -- Mobile Adjustments (< 768px) -- */
@media screen and (max-width: 767px) {
  /* Simple vertical stack on mobile with normal gaps */
  .md-typeset .pattern-nav {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: var(--space-md);
    padding-top: var(--space-xs);
    padding-bottom: 0;
  }

  /* Reset all flex items so they stack naturally in the center */
  .md-typeset .pattern-nav-prev,
  .md-typeset .pattern-nav-center,
  .md-typeset .pattern-nav-next {
    flex: none;
    width: 100%;
    justify-content: center;
    text-align: center;
    order: 0; /* Clear previous order overrides */
  }

  /* Make sure link text isn't truncated on mobile since it has full width */
  .md-typeset .pattern-nav a {
    white-space: normal;
    text-overflow: clip;
  }
}


/* ----------------------------------------------------------------------------
   23. Miscellaneous Refinements
   ---------------------------------------------------------------------------- */

/* Remove Material's default icon before admonition titles on mobile */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Smooth scrolling (disabled in reduced motion) */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Selection color — subtle primary tint */
::selection {
  background-color: rgba(79, 70, 229, 0.15);
  color: inherit;
}

[data-md-color-scheme="slate"] ::selection {
  background-color: rgba(129, 140, 248, 0.2);
}

/* Keyboard shortcut hints in search */
.md-search__key {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* Tab indicator — Material uses bottom border; override color */
.md-tabs {
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
}

.md-tabs__link {
  color: var(--color-ink-secondary);
  font-size: 14px;
  font-weight: 500;
}

.md-tabs__link--active {
  color: var(--color-primary);
}

/* Horizontal scrolling for code — never wrap (§7.4 Code Interaction) */
.md-typeset pre {
  overflow-x: auto;
}

.md-typeset pre code {
  white-space: pre;
  word-break: normal;
}

/* Image styling (§8.3) */
.md-typeset img {
  border-radius: var(--radius-lg);
  max-width: 100%;
  height: auto;
}

/* Strong text — weight 600 ceiling (§3.3) */
.md-typeset strong {
  font-weight: 600;
}

/* --- Fix H1 / H2 Spacing --- */
.md-typeset h2 {
  margin-top: var(--space-xxl);
}

/* ----------------------------------------------------------------------------
   Custom Footer Layout
   Responsive footer navigation (stacked on mobile, piped on desktop)
   ---------------------------------------------------------------------------- */

.footer-links {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0.5rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
}

/* Add pipes between links on desktop */
.footer-links a:not(:last-child)::after {
  content: "|";
  margin: 0 0.6rem;
  color: var(--color-ink-muted);
}

.copyright-text {
  text-align: left;
  margin-top: 0.75rem;
  color: var(--color-ink-secondary);
}

/* Stack them on mobile */
@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    align-items: flex-start;
  }

  .footer-links a:not(:last-child)::after {
    display: none; /* Hide the pipes on mobile */
  }

  .copyright-text {
    text-align: left;
  }
}

/* Standard FAQ / Details Block Styling (Plain surface, no icon, flush left) */
.md-typeset details:not([class*="tip"]):not([class*="note"]):not([class*="warning"]):not([class*="danger"]) {
  background-color: var(--color-surface-soft); /* Plain background, same as 'note' callouts */
  border-left: 4px solid var(--color-hairline); /* Subtle border instead of bright color */
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Force hiding of all pseudo-element icons on the summary */
.md-typeset details:not([class*="tip"]):not([class*="note"]):not([class*="warning"]):not([class*="danger"]) summary::before,
.md-typeset details:not([class*="tip"]):not([class*="note"]):not([class*="warning"]):not([class*="danger"]) summary::after {
  display: none !important;
  content: none !important;
}

/* Summary (Title) text formatting - flush left, no gap */
.md-typeset details:not([class*="tip"]):not([class*="note"]):not([class*="warning"]):not([class*="danger"]) summary {
  padding-left: 0 !important; /* Start text exactly at the edge */
  margin-left: 0 !important; 
  background-color: transparent !important; /* Ensure same background as parent */
  font-size: 16px;
  color: var(--color-ink);
  cursor: pointer;
}

/* Inner content alignment */
.md-typeset details:not([class*="tip"]):not([class*="note"]):not([class*="warning"]):not([class*="danger"]) > *:not(summary) {
  margin-left: 0 !important; /* Flush left */
}