/* =========================================================================
   AMX docs — built to STRICT three-column spec.
   - Header: ONE slim row (logo + nav + theme toggle icon only)
   - Left sidebar: 280px, populated (search + active pill + groups + collapse)
   - Center content: 720px max
   - Right TOC: 220px, sticky, ≥1280px only, anchors only
   - No floating widgets, no feedback widget, no header dropdowns/CTA
   ========================================================================= */

:root {
  --font-text:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-md-color-scheme="default"] {
  --bg:           #FFFFFF;
  --bg-sidebar:   #FAFBFC;
  --bg-hover:     #F1F3F5;
  --bg-elevated:  #FFFFFF;
  --text:         #1B1F23;
  --text-muted:   #57606A;
  --text-faint:   #8B919A;
  --border:       #E5E7EB;
  --accent:       #2563EB;
  --accent-dark:  #1D4ED8;
  --accent-soft:  rgba(37, 99, 235, 0.08);
  --code-bg:      #F6F8FA;
  --tip:          #0F8C73;
  --tip-soft:     rgba(15, 140, 115, 0.08);

  --md-default-bg-color:         var(--bg);
  --md-default-fg-color:         var(--text);
  --md-typeset-color:            var(--text);
  --md-typeset-a-color:          var(--accent);
  --md-primary-fg-color:         var(--accent);
  --md-primary-fg-color--light:  var(--accent);
  --md-primary-fg-color--dark:   var(--accent-dark);
  --md-primary-bg-color:         var(--bg);
  --md-accent-fg-color:          var(--accent);
  --md-code-bg-color:            var(--code-bg);
  --md-code-fg-color:            var(--text);
}

[data-md-color-scheme="slate"] {
  --bg:           #1B1F24;
  --bg-sidebar:   #16191D;
  --bg-hover:     #22262D;
  --bg-elevated:  #1F232A;
  --text:         #D8DDE3;
  --text-muted:   #9CA3AD;
  --text-faint:   #6B7280;
  --border:       #2A2E36;
  --accent:       #60A5FA;
  --accent-dark:  #93C5FD;
  --accent-soft:  rgba(96, 165, 250, 0.10);
  --code-bg:      #14171B;
  --tip:          #34D399;
  --tip-soft:     rgba(52, 211, 153, 0.10);

  --md-default-bg-color:         var(--bg);
  --md-default-fg-color:         var(--text);
  --md-typeset-color:            var(--text);
  --md-typeset-a-color:          var(--accent);
  --md-primary-fg-color:         var(--accent);
  --md-primary-fg-color--light:  var(--accent);
  --md-primary-fg-color--dark:   var(--accent-dark);
  --md-primary-bg-color:         var(--bg);
  --md-accent-fg-color:          var(--accent);
  --md-code-bg-color:            var(--code-bg);
  --md-code-fg-color:            var(--text);

  --md-typeset-kbd-color:        var(--bg-elevated);
  --md-typeset-kbd-accent-color: var(--border);
  --md-typeset-kbd-border-color: var(--border);

  --md-default-fg-color--light:  var(--text-muted);
  --md-default-fg-color--lighter: var(--text-faint);
  --md-default-fg-color--lightest: var(--border);
}

html, body { background: var(--bg); }

/* ───────────── Base typography ───────────── */

body, .md-typeset {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.md-typeset p,
.md-typeset li {
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
.md-typeset a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}
.md-typeset a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.md-typeset h1 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 20px;
}
.md-typeset h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 56px 0 24px;
}
.md-typeset h2:first-of-type { margin-top: 32px; }
.md-typeset h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}
.md-typeset h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}
.md-typeset .headerlink {
  color: var(--text-faint) !important;
  opacity: 0;
  margin-left: 8px;
  transition: opacity 150ms ease;
}
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink { opacity: 1; }

/* ───────────── Header — one slim row, ~56px ───────────── */

.md-header {
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  height: 56px;
  position: sticky;
}
.md-header__inner {
  height: 56px;
  padding: 0 24px;
  max-width: none;
  display: flex;
  align-items: center;
}
/* Logo image already says "AMX" — hide the wordmark beside it everywhere. */
.md-header__title { display: none; }
.md-header__button.md-logo {
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
/* The new AMX terminal-style logo is wide (≈2.2:1). Constrain by height,
   let width auto-scale, keep crisp pixels (no smoothing). */
.md-header__button.md-logo img {
  height: 26px;
  width: auto;
  max-width: 120px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.md-header__button.md-logo svg { height: 28px; width: 28px; }
@media (max-width: 768px) {
  .md-header__button.md-logo img { height: 22px; max-width: 96px; }
}

.amx-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 32px;
}
.amx-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 150ms ease;
}
.amx-nav a:hover,
.amx-nav a.active { color: var(--accent); }
@media (max-width: 1024px) { .amx-nav { display: none; } }

.amx-headright {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Theme toggle — strip Material's button styling so it's just the icon */
.amx-headright .md-header__button {
  background: transparent;
  border: none;
  padding: 8px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}
.amx-headright .md-header__button:hover {
  color: var(--accent);
  background: var(--bg-hover);
}
.amx-headright .md-header__button svg { width: 18px; height: 18px; }

/* Hide Material's header search trigger and source repo button — search lives in sidebar.
   Note: the palette toggle ALSO has class .md-header__option, so we re-show it
   when nested inside our .amx-headright container. */
.md-header__option { display: none; }
.md-header__source { display: none; }
.md-header form[name="search"] { display: none; }
[for="__search"].md-icon.md-header__button { display: none; }
.amx-headright .md-header__option { display: flex; }

/* ───────────── Three-column grid layout ───────────── */
/* DOM order from Material is: primary sidebar, secondary sidebar, content.
   So we use explicit grid-column to put each into the correct track.
   minmax(0, 1fr) is critical so long content can't stretch the track. */

.md-grid { max-width: none; margin: 0; padding: 0; }
.md-main { background: var(--bg); }
.md-main__inner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  gap: 40px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 32px;
}
.md-sidebar--primary    { grid-column: 1; }
.md-content             { grid-column: 2; }
.md-sidebar--secondary  { grid-column: 3; }

@media (max-width: 1280px) {
  .md-main__inner { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
  .md-sidebar--secondary { display: none; }
}
@media (max-width: 1024px) {
  /* Single-column layout — content fills the viewport, sidebar becomes a drawer overlay */
  .md-main__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px 16px 32px;
  }
  .md-content { grid-column: 1 / -1; min-width: 0; }
  /* The sidebar's grid placement is irrelevant once it's position:fixed (drawer rules apply) */
}

/* ───────────── Center content column — fills its track, no width ───────────── */

.md-content {
  max-width: none;
  width: auto;
  min-width: 0;          /* critical: lets the column shrink below content size */
  margin: 0;
  background: var(--bg);
}

/* The inner text wrapper is what's constrained, NOT the column itself.
   Left-aligned (no margin: auto) so the text starts at the column's left edge. */
.md-content__inner {
  max-width: 960px;
  margin: 0;
  padding: 0;
}
.md-content__inner::before { display: none; }
.md-content__button { display: none !important; }

/* H1 wraps at word boundaries only — never mid-word */
.md-typeset h1 {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ───────────── Left sidebar ───────────── */
/* Lives in grid column 1 (280px track). No width on the element — the
   track sets it. No overflow:hidden — the inner scrollwrap handles
   scroll with overflow-y: auto. */

.md-sidebar--primary {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
}
.md-sidebar--primary .md-sidebar__scrollwrap {
  background: var(--bg-sidebar);
  margin: 0;
  height: 100%;
  overflow-y: auto;
}
.md-sidebar--primary .md-sidebar__inner {
  padding: 0;
  font-size: 14px;
}

/* Hide Material's stock mobile drawer-title chrome (we don't render it from nav.html
   anymore, but other Material partials may still emit one). */
.md-sidebar--primary .md-nav--primary > .md-nav__title[for="__drawer"] {
  display: none !important;
}

/* Mobile close button — hidden on desktop; shown only inside the drawer */
.amx-sidebar__close {
  display: none;
}
.amx-sidebar__close svg { width: 24px; height: 24px; display: block; }

/* ── Mobile drawer (≤1024px) ─────────────────────────────────────
   On desktop, .md-sidebar--primary is a sticky column inside the grid.
   On mobile, it must slide in from the left as an overlay drawer
   driven by the existing __drawer checkbox in <body>. */

@media (max-width: 1024px) {
  /* Drawer container: fixed, full-height overlay, hidden by default.
     `!important` is used here to override Material's stock mobile drawer
     defaults (`width: 12.1rem`, `left: -12.1rem`, `transform: translateX(0)`),
     which would otherwise leave the drawer only partially visible because
     they assume a 12.1rem-wide drawer that uses `left: -12.1rem` to hide and
     `transform: translateX(12.1rem)` to show. We use a simpler model:
     fixed at left: 0, width 280px, slide via translateX. */
  .md-sidebar--primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 5;
    border-right: 1px solid var(--border);
    transform: translateX(-100%) !important;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    background: var(--bg-sidebar);
    overflow-y: auto;
  }

  /* OPEN STATE — drawer slides in. Same selector chain Material uses,
     plus a higher-specificity body[…] variant and a :has() fallback. */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary,
  body:has(#__drawer:checked) .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  /* Backdrop overlay when drawer is open */
  .md-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 4;
  }
  body:has(#__drawer:checked) .md-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Show the close button only inside the mobile drawer */
  .amx-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 100ms ease, color 100ms ease;
    z-index: 1;
  }
  .amx-sidebar__close:hover {
    background: var(--bg-hover);
    color: var(--text);
  }

  /* Pad the home link so it doesn't sit under the close X */
  .amx-sidebar__home {
    padding-right: 56px;
  }
}

.amx-sidebar__nav {
  padding: 0;
  /* No flex/height — let the parent .md-sidebar__scrollwrap own the scroll. */
}

/* Hide Material's mobile drawer label on desktop */
.amx-sidebar__nav > label.md-nav__title[for="__drawer"] { display: none; }
@media (max-width: 1024px) {
  .amx-sidebar__nav > label.md-nav__title[for="__drawer"] { display: flex; }
}

/* ── Home link → sticks to top while the tree scrolls ─────── */
.amx-sidebar__home {
  display: block;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 20px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
  transition: color 150ms ease;
}
.amx-sidebar__home:hover { color: var(--accent); text-decoration: none; }
.amx-sidebar__home--active { color: var(--accent); }

/* ── Tree wrapper (no overflow — scroll lives on the scrollwrap) ── */
.amx-sidebar__tree {
  padding: 8px 0 24px;
}

/* ── Group (= one top-level or nested section) ───────── */
.amx-sidebar__group {
  margin: 0;
  padding: 0;
}
.amx-sidebar__group + .amx-sidebar__group {
  margin-top: 4px;
}
/* Extra breathing room between top-level groups */
.amx-sidebar__group--depth-0 + .amx-sidebar__group--depth-0 {
  margin-top: 16px;
}

/* Uppercase muted category label */
.amx-sidebar__group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 20px 6px;
  line-height: 1.4;
}
.amx-sidebar__group--depth-1 > .amx-sidebar__group-title {
  font-size: 10px;
  padding: 10px 20px 4px 28px;
  color: var(--text-faint);
}

/* ── Leaf links ────────────────────────────────────── */
.amx-sidebar__link {
  display: block;
  padding: 5px 20px 5px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.45;
  transition: background 80ms ease, color 80ms ease;
  white-space: normal;
  word-break: break-word;
}
.amx-sidebar__link:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}
/* Subtle active state — accent text + faint bg, NO thick left border */
.amx-sidebar__link--active {
  color: var(--accent) !important;
  background: var(--accent-soft);
  font-weight: 500;
}

/* Nested links sit deeper (mirrors --group-title indent) */
.amx-sidebar__link--depth-0 { padding-left: 20px; }
.amx-sidebar__link--depth-1 { padding-left: 28px; }
.amx-sidebar__link--depth-2 { padding-left: 36px; }
.amx-sidebar__link--depth-3 { padding-left: 44px; }


/* ───────────── Right TOC — 220px, sticky, ≥1280px only ───────────── */

/* Right TOC lives in grid column 3 (220px track). No width on the
   element — the track sets it. No left padding — the grid gap handles
   spacing between columns. */
@media (min-width: 1281px) {
  .md-sidebar--secondary {
    display: block;
    padding: 0;
    position: sticky;
    top: 80px;
    align-self: start;
    background: var(--bg);
    max-height: calc(100vh - 96px);
  }
}
@media (max-width: 1280px) {
  .md-sidebar--secondary { display: none !important; }
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  background: var(--bg);
  overflow-y: auto;
  overflow-x: visible;
  max-height: calc(100vh - 96px);
  padding-right: 8px;
}
.md-sidebar--secondary .md-nav__title {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0 12px 12px;
  border-bottom: none;
  background: transparent;
  display: block;
}
.md-sidebar--secondary .md-nav__list {
  padding: 0;
  list-style: none;
  margin: 0;
}
.md-sidebar--secondary .md-nav__item {
  padding: 0;
  margin: 0;
  display: block;
}
.md-sidebar--secondary .md-nav__link {
  display: block;
  padding: 6px 12px;
  margin: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  min-height: 28px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.md-sidebar--secondary .md-nav__link::after { content: none; }
.md-sidebar--secondary .md-nav__link:hover {
  background: transparent;
  color: var(--accent);
}
.md-sidebar--secondary .md-nav__link--active {
  border-left-color: var(--accent);
  color: var(--text) !important;
  font-weight: 500;
  background: transparent;
}

/* ───────────── Buttons in body ───────────── */

.md-typeset .md-button {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--bg);
  transition: all 150ms ease;
}
.md-typeset .md-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.md-typeset .md-button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF !important;
}
.md-typeset .md-button--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #FFFFFF !important;
}

/* ───────────── Code ───────────── */

.md-typeset pre > code,
.md-typeset .highlight pre {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
}
.md-typeset code {
  font-size: 13px;
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--bg-hover);
  color: var(--text);
}

/* ───────────── Tables ───────────── */

.md-typeset table:not([class]) {
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--bg-hover);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.md-typeset table:not([class]) td {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* ───────────── Tip / Note callouts — Databricks-style soft teal ───────────── */

.md-typeset .admonition,
.md-typeset details {
  border: none;
  border-radius: 8px;
  background: var(--tip-soft);
  box-shadow: none;
  font-size: 14px;
  padding: 4px 18px;
  margin: 24px 0;
  color: var(--text);
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tip);
  border-bottom: none;
  background: transparent;
  padding: 14px 0 6px 28px;
  text-transform: none;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--tip) !important;
  top: 14px;
}
.md-typeset .admonition > p,
.md-typeset details > p {
  color: var(--text);
  padding: 0 0 14px;
  line-height: 1.6;
}

/* Warning / danger keep a warmer accent */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  background: rgba(245, 158, 11, 0.10);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary { color: #D97706; }
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset details.warning > summary::before { background-color: #D97706 !important; }

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  background: rgba(251, 191, 36, 0.10);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.warning > summary { color: #FBBF24; }
[data-md-color-scheme="slate"] .md-typeset .admonition.warning > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset details.warning > summary::before { background-color: #FBBF24 !important; }

/* ───────────── Card grid — 2 columns on desktop ───────────── */

.md-typeset .grid.cards { margin: 24px 0; }
.md-typeset .grid.cards > ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .md-typeset .grid.cards > ul { grid-template-columns: 1fr; }
}

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  background: transparent;
  margin: 0;
  transition: border-color 120ms ease, background 120ms ease;
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: none;
}
.md-typeset .grid.cards > ul > li > p:first-child,
.md-typeset .grid.cards > ul > li > h3 {
  margin: 0 0 6px !important;
  font-weight: 700;
  font-size: 15px !important;
  letter-spacing: 0;
  color: var(--text) !important;
  line-height: 1.35 !important;
  transition: color 120ms ease;
}
.md-typeset .grid.cards > ul > li:hover > p:first-child,
.md-typeset .grid.cards > ul > li:hover > h3 {
  color: var(--accent) !important;
}
.md-typeset .grid.cards > ul > li > p:first-child a,
.md-typeset .grid.cards > ul > li > h3 a {
  color: inherit !important;
  text-decoration: none !important;
}
.md-typeset .grid.cards > ul > li > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.md-typeset .grid.cards > ul > li > p:not(:first-child) { margin-top: 8px; }

/* ───────────── About page — modeled on omeryasirkucuk.github.io ───────── */

/* Local color tokens for the hero card so we don't fight the rest of the
   theme (these match the personal site's --bg, --accent, --green). */
.amx-hero {
  --hero-accent: #3b82f6;
  --hero-grad-end: #8b5cf6;
  --hero-green: #22c55e;
  --hero-green-soft: rgba(34, 197, 94, 0.10);
  --hero-green-border: rgba(34, 197, 94, 0.20);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  margin: 32px 0 56px;
}

/* Profile photo — circular, dark-ring shadow */
.amx-hero__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--border);
  margin-bottom: 28px;
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 5px rgba(59, 130, 246, 0.30);
}

/* Green role pill */
.amx-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--hero-green-soft);
  border: 1px solid var(--hero-green-border);
  border-radius: 100px;
  font-size: 13px;
  color: var(--hero-green);
  margin-bottom: 28px;
  font-weight: 500;
}
.amx-hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--hero-green);
  border-radius: 50%;
  display: inline-block;
}

/* Name with gradient on the surname */
.md-typeset h1.amx-hero__name {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.amx-hero__name-grad {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* CTA buttons — primary filled blue, secondary outline */
.amx-hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 32px 0 0;
}
.md-typeset .amx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
  border: 1px solid transparent;
  line-height: 1;
}
.md-typeset .amx-btn:active { transform: scale(0.98); }
.md-typeset .amx-btn--primary {
  background: var(--hero-accent);
  color: #fff !important;
  border-color: var(--hero-accent);
}
.md-typeset .amx-btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff !important;
}
.md-typeset .amx-btn--secondary {
  background: transparent;
  color: var(--text) !important;
  border-color: var(--border);
}
.md-typeset .amx-btn--secondary:hover {
  border-color: var(--text-muted);
  background: var(--bg-hover);
}

/* Social icons row */
.amx-hero__socials {
  display: flex;
  gap: 18px;
  margin-top: 40px;
  align-items: center;
}
.amx-hero__socials a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  display: inline-flex;
  transition: color 150ms ease, transform 80ms ease;
}
.amx-hero__socials a:hover {
  color: var(--text) !important;
}
.amx-hero__socials a:active { transform: scale(0.92); }

/* Mobile tightening */
@media (max-width: 768px) {
  .amx-hero { margin: 16px 0 32px; }
  .amx-hero__photo { width: 128px; height: 128px; margin-bottom: 20px; }
  .amx-hero__badge { font-size: 12px; padding: 5px 12px; margin-bottom: 20px; }
  .md-typeset h1.amx-hero__name { font-size: 2.2rem; }
  .amx-hero__actions { gap: 10px; margin-top: 24px; }
  .md-typeset .amx-btn { padding: 10px 18px; font-size: 13px; }
  .amx-hero__socials { gap: 14px; margin-top: 28px; }
}

/* ───────────── Why AMX — pain vs angle, two-column callout ──────────── */
/* Sits between the intro paragraphs and the CLI hero on the home page.
   Left column is the pain point (amber accent — drawing attention),
   right column is AMX's response (cyan accent — on-brand). */

.md-typeset .amx-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.md-typeset .amx-why__ask {
  /* Span the full row beneath pain + angle, giving /ask its own beat
     in the narrative arc (problem → angle → outcome). */
  grid-column: 1 / -1;
}
.md-typeset .amx-why__pain,
.md-typeset .amx-why__angle,
.md-typeset .amx-why__ask {
  border-radius: 10px;
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.6;
}
.md-typeset .amx-why__pain {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 4px solid #F59E0B;
}
.md-typeset .amx-why__pain strong:first-child {
  color: #F59E0B;
  letter-spacing: 0.02em;
}
[data-md-color-scheme="slate"] .md-typeset .amx-why__pain {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
  border-left-color: #FBBF24;
}
[data-md-color-scheme="slate"] .md-typeset .amx-why__pain strong:first-child {
  color: #FBBF24;
}

.md-typeset .amx-why__angle {
  background: var(--accent-soft);
  border: 1px solid rgba(120, 241, 242, 0.25);
  border-left: 4px solid var(--accent);
}
.md-typeset .amx-why__angle strong:first-child {
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* Third box — /ask, emerald accent (third distinct color for the
   third narrative beat: problem → angle → outcome).
   Spans the full row beneath the first two via grid-column: 1 / -1. */
.md-typeset .amx-why__ask {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 4px solid #10B981;
}
.md-typeset .amx-why__ask strong:first-child {
  color: #10B981;
  letter-spacing: 0.02em;
}
.md-typeset .amx-why__ask em {
  font-style: normal;
  color: var(--text);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.95em;
  border: 1px solid var(--border);
  white-space: nowrap;
}
[data-md-color-scheme="slate"] .md-typeset .amx-why__ask {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
  border-left-color: #34D399;
}
[data-md-color-scheme="slate"] .md-typeset .amx-why__ask strong:first-child {
  color: #34D399;
}

.md-typeset .amx-why__pain p,
.md-typeset .amx-why__angle p,
.md-typeset .amx-why__ask p {
  margin: 0;
}
@media (max-width: 768px) {
  .md-typeset .amx-why { grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }
  .md-typeset .amx-why__pain,
  .md-typeset .amx-why__angle,
  .md-typeset .amx-why__ask { padding: 16px 18px; font-size: 13px; }
}

/* ───────────── Hero flow diagram on the home page (above H1) ─────── */

.md-typeset .amx-flow-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 4px auto 28px;
  background: transparent;
  /* No border/shadow — it's an ambient explainer, not a card */
}
@media (max-width: 768px) {
  .md-typeset .amx-flow-img {
    margin: 0 auto 16px;
  }
}

/* ───────────── Hero CLI screenshot on the home page ───────────── */

.md-typeset .amx-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 28px 0 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0B0E12;            /* matches the dark terminal in the screenshot */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-md-color-scheme="slate"] .md-typeset .amx-hero-img {
  box-shadow: none;
}

/* ───────────── Page intro: breadcrumb on top, last-updated immediately above H1 ───────────── */

.amx-pageintro { margin: 0 0 4px; }
.amx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.amx-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.amx-breadcrumb a:hover { color: var(--accent); }
.amx-breadcrumb__sep { opacity: 0.5; }
.amx-breadcrumb__home {
  display: inline-flex; align-items: center;
}
.amx-breadcrumb__home svg { width: 14px; height: 14px; }

/* ───────────── Footer ───────────── */

.amx-footer {
  background: var(--bg);
  padding: 32px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.amx-footer__line {
  font-size: 13px;
  color: var(--text-muted);
}
.amx-footer__line a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.amx-footer__line a:hover { color: var(--accent); }
.amx-footer__sep { margin: 0 8px; opacity: 0.6; }

/* GitHub repo link in the footer — icon + repo path, slightly emphasised */
.amx-footer__github {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.amx-footer__github svg {
  flex-shrink: 0;
  vertical-align: -2px;
}

/* Hide Material's default footer chrome */
.md-footer { background: transparent; }
.md-footer-meta { display: none; }
.md-footer__inner { padding: 0; }
.md-footer__title { display: none; }
.md-footer-nav { display: none !important; }

/* ───────────── Misc ───────────── */

.md-typeset hr { border: none; height: 1px; background: var(--border); margin: 32px 0; }
.md-typeset blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  color: var(--text);
}

/* ───────────── Responsive ───────────── */

/* Tablet and below: tighten content padding, let tables scroll horizontally
   instead of forcing the page to be wider than the viewport. */
@media (max-width: 1024px) {
  .md-content__inner { padding: 4px 0 32px; max-width: 100%; }

  /* Tables → horizontal scroll on overflow */
  .md-typeset table:not([class]) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    white-space: normal;
  }

  /* Code blocks and pre — let the content scroll, never overflow the viewport */
  .md-typeset pre > code,
  .md-typeset .highlight pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero CLI screenshot scales with viewport */
  .md-typeset .amx-hero-img {
    margin: 16px 0 24px;
    border-radius: 6px;
  }

  /* Header padding tightened */
  .md-header__inner { padding: 0 16px; }
  .amx-headright { gap: 4px; }
}

/* Phone-sized: shrink headings, single-column cards */
@media (max-width: 768px) {
  .md-typeset h1 { font-size: 28px; line-height: 1.2; margin-bottom: 16px; }
  .md-typeset h2 { font-size: 20px; margin-top: 36px; }
  .md-typeset h3 { font-size: 17px; }
  .md-typeset p, .md-typeset li { font-size: 15px; }

  /* Card grid → single column on phones */
  .md-typeset .grid.cards > ul { grid-template-columns: 1fr !important; gap: 12px; }

  /* Footer compact */
  .amx-footer { padding: 24px 16px; }
}