/* Local preview styles. Brand palette from multigate-website-v2. */
:root {
  --mg-blue: #137bf5;
  --mg-blue-soft: #5d8ffa;
  --mg-green: #16c88a;
  --mg-mint: #dafff1;
  --mg-navy: #08275c;

  --bg: #ffffff;
  --bg-subtle: #f5f6fa;
  --bg-raised: #ffffff;
  --border: #e3e8f0;
  --text: #0f1217;
  --text-muted: #5b6678;
  --link: #0d63cf;
  --accent: var(--mg-blue);
  --accent-soft: #eaf2fe;
  --code-bg: #f6f8fb;
  --shadow: 0 1px 2px rgb(8 39 92 / 6%), 0 4px 16px rgb(8 39 92 / 6%);
  --shadow-lift: 0 2px 6px rgb(8 39 92 / 8%), 0 12px 32px rgb(8 39 92 / 10%);
  --accent-gradient: linear-gradient(135deg, var(--mg-blue), var(--mg-green));

  --tip: #16c88a;
  --tip-bg: #ecfdf5;
  --info: #137bf5;
  --info-bg: #eef5ff;
  --warning: #d97706;
  --warning-bg: #fff8eb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;

  --header-h: 60px;
  --sidebar-w: 256px;
  --toc-w: 216px;
  --assistant-w: 400px;
  --radius: 10px;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0c1017;
  --bg-subtle: #10151e;
  --bg-raised: #151b26;
  --border: #232c3b;
  --text: #e9eef7;
  --text-muted: #a3afc2;
  --link: #8ab8ff;
  --accent: #6ea4ff;
  --accent-soft: #172741;
  --code-bg: #0a0e14;
  --shadow: 0 1px 2px rgb(0 0 0 / 50%), 0 6px 20px rgb(0 0 0 / 35%);
  --shadow-lift: 0 2px 8px rgb(0 0 0 / 50%), 0 16px 40px rgb(0 0 0 / 55%);
  --tip-bg: #0f2a23;
  --info-bg: #11203a;
  --warning-bg: #2c2010;
  --danger-bg: #2f1518;
  color-scheme: dark;
}

/* Method colours: GET blue, POST green, PUT orange, PATCH yellow, DELETE red. */
:root {
  --method-get: #0b66d6;
  --method-post: #0a8a55;
  --method-put: #c2410c;
  --method-patch: #a16207;
  --method-delete: #c62828;
}
:root[data-theme='dark'] {
  --method-get: #6ab0ff;
  --method-post: #4ade80;
  --method-put: #fb923c;
  --method-patch: #facc15;
  --method-delete: #f87171;
}

.mg-method { display: inline-block; padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.mg-method-get { color: var(--method-get); background: color-mix(in srgb, var(--method-get) 14%, transparent); }
.mg-method-post { color: var(--method-post); background: color-mix(in srgb, var(--method-post) 14%, transparent); }
.mg-method-put { color: var(--method-put); background: color-mix(in srgb, var(--method-put) 14%, transparent); }
.mg-method-patch { color: var(--method-patch); background: color-mix(in srgb, var(--method-patch) 14%, transparent); }
.mg-method-delete { color: var(--method-delete); background: color-mix(in srgb, var(--method-delete) 14%, transparent); }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: 2px; }
/* External links get a small arrow (Lucide arrow-up-right as a mask, so it follows the link colour). */
.mg-article a[href^='http']:not(.mg-card-link)::after {
  content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.2em; vertical-align: -0.05em; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, pre { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; }

.mg-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg-raised); padding: 8px 12px; border-radius: 6px; }
.mg-skip:focus { left: 16px; }

/* Header */
.mg-header {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; gap: 24px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mg-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mg-brand-tag { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.mg-tabs-nav { display: flex; gap: 4px; }
.mg-tab-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.mg-tab-link .mg-svg-icon { font-size: 16px; opacity: 0.8; }
.mg-tab-link:hover { color: var(--text); background: var(--bg-subtle); }
.mg-tab-link.is-active { color: var(--accent); background: var(--accent-soft); }
.mg-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mg-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.mg-icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--text); cursor: pointer; font-size: 18px; }
.mg-menu-button { display: none; }

/* Shell */
.mg-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); max-width: 1680px; margin: 0 auto; }
.is-reference .mg-shell { display: block; max-width: none; }
.mg-sidebar {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 20px 20px 48px; border-right: 1px solid var(--border);
}
.mg-nav-section { margin-bottom: 22px; }
.mg-nav-heading { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.mg-nav-heading .mg-svg-icon { font-size: 15px; color: var(--accent); }
/* Pages sit indented under their section heading, on a guide line that starts below the heading's icon, so the
   two levels read the same way as the API reference sidebar. */
.mg-nav-section ul { list-style: none; margin: 0 0 0 7px; padding: 0 0 0 6px; border-left: 1px solid var(--border); }
.mg-nav-section a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 1.4; transition: background 0.12s, color 0.12s; }
.mg-nav-section a:hover { background: var(--bg-subtle); color: var(--text); }
.mg-nav-section a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mg-nav-section.is-draft { opacity: 0.85; }
.mg-badge { font-size: 10px; font-weight: 700; color: var(--warning); background: var(--warning-bg); border-radius: 999px; padding: 1px 6px; text-transform: none; letter-spacing: 0; }

.mg-main { min-width: 0; padding: 32px 48px 80px; }
.mg-main:focus { outline: none; }
/* Wide enough for six-column tables and side-by-side code; prose keeps a comfortable measure through line-height. */
.mg-article { max-width: 1040px; margin: 0 auto; }
.mg-toc { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 32px 20px 40px 0; font-size: 13px; }
.mg-toc-heading { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0 0 8px; }
.mg-toc-heading .mg-svg-icon { font-size: 15px; color: var(--text-muted); }
.mg-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.mg-toc li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; transition: color 0.12s, border-color 0.12s; }
.mg-toc li a:hover { color: var(--text); }
.mg-toc li a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.mg-toc .mg-toc-h3 a { padding-left: 24px; }

/* Typography */
.mg-article h1 { font-size: 2.35rem; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 750; }
.mg-article h1 + p { font-size: 1.12rem; color: var(--text-muted); }
.mg-article h2 { font-size: 1.5rem; letter-spacing: -0.015em; margin: 2.6em 0 0.7em; padding-top: 0; border-top: 0; }
.mg-article h3 { font-size: 1.12rem; margin: 1.8em 0 0.5em; }
.mg-article p, .mg-article li { color: var(--text); }
.mg-article :not(pre) > code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: 0.1em 0.35em; }
.mg-table { margin: 1.2em 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.mg-article table { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14.5px; line-height: 1.55; }
/* The first column names the thing (field, status, message): give it room before the browser squeezes it. */
.mg-article th:first-child { min-width: 9em; }
.mg-article tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-subtle) 55%, transparent); }
.mg-article th, .mg-article td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mg-article tr:last-child td { border-bottom: 0; }
.mg-article th { background: var(--bg-subtle); font-weight: 600; font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Field names in headers keep their case; long identifiers may break so one column can't crowd out the rest. */
.mg-article th code { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

.mg-article img { max-width: 100%; height: auto; }
.mg-article hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

/* Code blocks */
.mg-code { position: relative; margin: 1.1em 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; }
.mg-code::before { content: attr(data-language); display: block; padding: 7px 14px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.mg-code pre.hljs { margin: 0; padding: 16px 18px; overflow-x: auto; background: transparent; line-height: 1.55; }
.mg-copy { position: absolute; top: 5px; right: 8px; font-size: 12px; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: inherit; }
.mg-copy:hover { color: var(--accent); border-color: var(--accent); }
.hljs { background: transparent !important; }

/* Diagrams */
.mg-diagram { margin: 1.4em 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); overflow-x: auto; text-align: center; }
.mg-diagram pre.mermaid { margin: 0; background: transparent; font-family: inherit; }
.mg-diagram pre.mermaid:not([data-processed]) { color: transparent; min-height: 120px; }
.mg-diagram svg .sequenceNumber { font-weight: 700; }
/* Node labels: a header (what this part of the flow is) over a quieter description (its details).
   Sizes come from <b>/<small> in client.js so Mermaid lays the boxes out for them; only colour and
   rhythm are set here. */
.mg-diagram .nodeLabel b { display: inline-block; font-weight: 650; color: var(--mg-navy); letter-spacing: -0.005em; }
.mg-diagram .nodeLabel small { display: inline-block; margin-top: 3px; font-size: 0.83em; line-height: 1.35; color: var(--text-muted); }
/* Edge labels describe the step between two parts: smaller, muted, on the page background. */
.mg-diagram .edgeLabel, .mg-diagram .edgeLabel p, .mg-diagram .edgeLabel span { color: var(--text-muted) !important; font-size: 12.5px; }
.mg-diagram .edgeLabel rect, .mg-diagram .labelBkg { fill: var(--bg-subtle) !important; background: var(--bg-subtle) !important; }
.mg-diagram .node rect, .mg-diagram .node polygon, .mg-diagram .node path, .mg-diagram .node circle { filter: drop-shadow(0 1px 1.5px rgb(8 39 92 / 10%)); }
/* Sequence diagrams: participants are the headers, notes the descriptions. */
.mg-diagram text.actor > tspan { font-weight: 600; }
.mg-diagram .noteText, .mg-diagram .noteText > tspan { font-style: italic; }
:root[data-theme='dark'] .mg-diagram .nodeLabel b { color: #e8eef8; }
:root[data-theme='dark'] .mg-diagram .node rect, :root[data-theme='dark'] .mg-diagram .node polygon,
:root[data-theme='dark'] .mg-diagram .node path, :root[data-theme='dark'] .mg-diagram .node circle { filter: none; }
:root[data-theme='dark'] .mg-diagram svg .sequenceNumber { font-weight: 800; }

/* Admonitions */
.mg-admonition { margin: 1.2em 0; padding: 12px 16px; border-left: 4px solid var(--info); border-radius: 8px; background: var(--info-bg); }
.mg-admonition > :first-child, .mg-admonition > .mg-admonition-title + * { margin-top: 0; }
.mg-admonition > :last-child { margin-bottom: 0; }
.mg-admonition-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.mg-admonition-icon { font-size: 18px; color: var(--info); }
.mg-admonition-tip .mg-admonition-icon, .mg-admonition-check .mg-admonition-icon { color: var(--tip); }
.mg-admonition-warning .mg-admonition-icon, .mg-admonition-caution .mg-admonition-icon { color: var(--warning); }
.mg-admonition-danger .mg-admonition-icon { color: var(--danger); }
.mg-admonition-note .mg-admonition-icon { color: var(--text-muted); }
.mg-admonition-tip, .mg-admonition-check { border-color: var(--tip); background: var(--tip-bg); }
.mg-admonition-warning, .mg-admonition-caution { border-color: var(--warning); background: var(--warning-bg); }
.mg-admonition-danger { border-color: var(--danger); background: var(--danger-bg); }
.mg-admonition-note { border-color: var(--text-muted); background: var(--bg-subtle); }

/* Steps */
.mg-steps { counter-reset: step; margin: 1.4em 0; }
.mg-step { position: relative; padding: 0 0 18px 44px; border-left: 2px solid var(--border); margin-left: 14px; }
.mg-step:last-child { border-left-color: transparent; }
.mg-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-green));
}
.mg-step-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; padding-top: 1px; }
.mg-step > :last-child { margin-bottom: 0; }

/* Tabs */
.mg-tabs { margin: 1em 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mg-tablist { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--bg-subtle); border-bottom: 1px solid var(--border); overflow-x: auto; }
.mg-tablist [role='tab'] { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--text-muted); border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; }
.mg-tablist [role='tab'][aria-selected='true'] { background: var(--bg); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.mg-tab { padding: 4px 16px; }
.mg-tab .mg-code { border: 0; border-radius: 0; margin: 0 -16px; }

/* Cards */
.mg-card-group { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px; margin: 1.2em 0; }
.mg-card { position: relative; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.mg-card-linked:hover, .mg-card-linked:focus-within { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mg-card-linked::after { content: '→'; position: absolute; top: 16px; right: 18px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.mg-card-linked:hover::after, .mg-card-linked:focus-within::after { opacity: 1; transform: none; }
.mg-card-title { font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mg-card-link { color: var(--text); text-decoration: none; }
.mg-card-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.mg-card-body { color: var(--text-muted); font-size: 14.5px; }
.mg-card-body > :last-child { margin-bottom: 0; }
.mg-icon { color: var(--accent); font-size: 18px; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); }

/* Accordions and columns */
.mg-accordion { border: 1px solid var(--border); border-radius: var(--radius); margin: 0.8em 0; background: var(--bg-raised); }
.mg-accordion summary { cursor: pointer; padding: 12px 16px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.mg-accordion-body { padding: 0 16px 8px; }
.mg-accordion-group .mg-accordion { margin: 0; border-radius: 0; border-bottom: 0; }
.mg-accordion-group .mg-accordion:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.mg-accordion-group .mg-accordion:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 1px solid var(--border); }
.mg-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; }

/* Pager */
.mg-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.mg-pager a { flex: 1; max-width: 48%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); text-decoration: none; color: var(--text); font-weight: 600; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.mg-pager a span { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; }
.mg-pager a:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.mg-pager-label { display: flex; align-items: center; gap: 4px; }
.mg-pager-label .mg-svg-icon { color: var(--accent); font-size: 14px; }
.mg-pager-next { text-align: right; margin-left: auto; }
.mg-pager-next .mg-pager-label { justify-content: flex-end; }

@media (max-width: 1200px) {
  .mg-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .mg-toc { display: none; }
  .mg-main { padding: 28px 36px 72px; }
  .mg-article th, .mg-article td { padding: 10px 12px; }
}
@media (max-width: 1100px) {
  .mg-header { gap: 16px; }
  .mg-search-button { min-width: 0; }
  .mg-search-button kbd, .mg-support-link span, .mg-ask-button kbd { display: none; }
}

@media (max-width: 860px) {
  .mg-header { gap: 12px; padding: 0 16px; }
  .mg-tabs-nav { display: none; }
  .mg-toggle span { display: none; }
  .mg-ask-button span, .mg-ask-button kbd, .mg-header .mg-support-link span { display: none; }
  .mg-staff-bar .mg-badge { display: none; }
  .mg-menu-button { display: grid; }
  .mg-shell { display: block; }
  .mg-sidebar { display: none; position: fixed; inset: var(--header-h) 0 0 0; height: auto; z-index: 15; background: var(--bg); border-right: 0; }
  .mg-sidebar.is-open { display: block; }
  .mg-main { padding: 24px 16px 64px; }
  /* Four or more columns can't share a phone's width: scroll the table rather than crush every cell. */
  .mg-article table:has(th:nth-child(4)) { min-width: 720px; }
  .mg-card-group, .mg-columns { grid-template-columns: 1fr; grid-auto-flow: row; }
  .mg-pager { flex-direction: column; }
  .mg-pager a { max-width: none; }
}

/* Task lists */
.mg-article li.mg-task { list-style: none; margin-left: -1.4em; }
.mg-article li.mg-task input { margin-right: 8px; accent-color: var(--accent); vertical-align: -1px; }

/* Phones: the header must fit 360px. Support is also in the help bar on every guide page, and the drafts toggle
   only exists in the local preview. */
@media (max-width: 520px) {
  .mg-header { gap: 8px; padding: 0 12px; }
  .mg-header-actions { gap: 6px; }
  .mg-header .mg-support-link, .mg-header .mg-toggle, .mg-staff-link span, .mg-staff-name, .mg-staff-sign-out span { display: none; }
  .mg-brand img { width: 108px; height: auto; }
  .mg-icon-button, .mg-search-button { width: 34px; height: 34px; }
  .mg-ask-button { height: 34px; padding: 0 9px; }
}

/* Section tabs repeated in the slide-out menu on small screens */
.mg-sidebar-tabs { display: none; }
@media (max-width: 860px) {
  .mg-sidebar-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
}

/* Inline SVG icons (replaces the icon CDN) */
.mg-svg-icon { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.mg-icon-button .mg-svg-icon { font-size: 18px; }

/* Search */
.mg-search-button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; min-width: 180px; }
.mg-search-button:hover { color: var(--text); border-color: var(--accent); }
.mg-search-button kbd { margin-left: auto; font: 11px ui-monospace, monospace; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.mg-search { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 80px)); margin: 72px auto 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); color: var(--text); box-shadow: 0 20px 60px rgb(8 39 92 / 25%); }
.mg-search::backdrop { background: rgb(8 14 24 / 45%); backdrop-filter: blur(2px); }
.mg-search-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mg-search-form-icon { font-size: 18px; color: var(--text-muted); }
.mg-search-form input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 6px; }
.mg-search-close { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); color: var(--text-muted); font-size: 12px; padding: 3px 8px; cursor: pointer; }
.mg-search-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: 460px; }
.mg-search-results a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.mg-search-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; border-radius: 8px; background: var(--bg-subtle); color: var(--accent); font-size: 16px; }
.mg-search-results [aria-selected='true'] .mg-search-icon { background: var(--bg-raised); }
.mg-search-text { min-width: 0; }
.mg-search-results [aria-selected='true'] a, .mg-search-results a:hover { background: var(--accent-soft); }
.mg-search-kind { display: block; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-search-title { font-weight: 600; }
.mg-search-path { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.mg-search-path code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-search-path .mg-method { padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 800; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.mg-search-empty { padding: 16px; color: var(--text-muted); }
@media (max-width: 860px) {
  .mg-search-button { min-width: 0; }
  .mg-search-button span, .mg-search-button kbd { display: none; }
}

/* ------------------------------------------------------------------ "Try it" console (try-it.js) */
.mg-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.mg-try-open { overflow: hidden; }
.mg-try-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgb(8 15 30 / 55%); backdrop-filter: blur(3px);
  animation: mg-try-fade 120ms ease-out;
}
.mg-try-backdrop[hidden] { display: none; }
@keyframes mg-try-fade { from { opacity: 0; } }
.mg-try {
  --try-ok: #0f9f6e; --try-ok-bg: #e8faf3; --try-warn: #b45309; --try-warn-bg: #fff6e6; --try-err: #c62828; --try-err-bg: #fdeeee;
  width: min(1280px, 100%); height: min(860px, 100%); display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 28%); overflow: hidden; font-size: 14px;
  animation: mg-try-rise 160ms ease-out;
}
@keyframes mg-try-rise { from { transform: translateY(8px) scale(0.99); opacity: 0; } }
:root[data-theme='dark'] .mg-try { --try-ok: #34d399; --try-ok-bg: #0b2a20; --try-warn: #fbbf24; --try-warn-bg: #2b2008; --try-err: #f87171; --try-err-bg: #2e1414; }
@media (prefers-reduced-motion: reduce) { .mg-try, .mg-try-backdrop { animation: none; } }

.mg-try-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.mg-try-head-main { min-width: 0; }
.mg-try-heading { display: flex; align-items: center; gap: 10px; }
.mg-try-title { margin: 0; font-size: 18px; line-height: 1.3; }
.mg-try-path { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; background: none; padding: 0; }
.mg-try-head-tools { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.mg-try-op-select { max-width: 280px; }
.mg-try-method { display: inline-block; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 6px; font: 700 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; color: #fff; background: #64748b; }
.mg-try-method-get { background: #0f9f6e; } .mg-try-method-post { background: var(--mg-blue); } .mg-try-method-put { background: #b45309; }
.mg-try-method-patch { background: #7c3aed; } .mg-try-method-delete { background: #c62828; }

.mg-try-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.mg-try-request, .mg-try-response { min-height: 0; overflow: auto; padding: 18px 20px 24px; }
.mg-try-request { border-right: 1px solid var(--border); margin: 0; }
.mg-try-response { background: var(--bg-subtle); }

.mg-try-section { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.mg-try-section-title { padding: 0; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mg-try-field { margin-bottom: 12px; }
.mg-try-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 13px; }
.mg-try-label code { background: none; padding: 0; font-weight: 600; color: var(--text); }
.mg-try-badge-required { font-size: 10.5px; font-weight: 700; color: var(--try-err); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-try-type { font: 11.5px ui-monospace, monospace; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.mg-try-help { margin: 4px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.mg-try-help code { font-size: 12px; }
.mg-try input[type='text'], .mg-try input[type='password'], .mg-try select, .mg-try textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.mg-try input[type='file'] { font: inherit; color: var(--text-muted); }
.mg-try input:focus-visible, .mg-try select:focus-visible, .mg-try textarea:focus-visible, .mg-try button:focus-visible, .mg-try a:focus-visible, .mg-try summary:focus-visible, .mg-try [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mg-try [aria-invalid='true'] { border-color: var(--try-err); }
.mg-try-input-group { display: flex; gap: 6px; }
.mg-try-input-group input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.mg-try-token-status { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.mg-try-token-status.is-ok { color: var(--try-ok); background: var(--try-ok-bg); }
.mg-try-token-status.is-missing { color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); }


.mg-try-code-wrap { display: flex; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); overflow: hidden; }
.mg-try-code-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-try-lines { padding: 9px 8px 9px 10px; text-align: right; white-space: pre; color: var(--text-muted); opacity: 0.6; user-select: none; overflow: hidden; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; border-right: 1px solid var(--border); }
.mg-try textarea.mg-try-code-input { border: 0; border-radius: 0; background: transparent; resize: vertical; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; white-space: pre; overflow: auto; min-height: 140px; }
.mg-try textarea.mg-try-code-input:focus-visible { outline: none; }
.mg-try-json-error { min-height: 1em; margin: 6px 0 0; color: var(--try-err); font-size: 12.5px; }
.mg-try-field-error { margin: 6px 0 0; color: var(--try-err); font-size: 12.5px; }
.mg-try-field-error:empty { display: none; }
.mg-try-inline-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mg-try-button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.mg-try-button:hover { border-color: var(--accent); color: var(--accent); }
.mg-try-button-quiet { background: transparent; }
.mg-try-button-primary { background: var(--mg-blue); border-color: var(--mg-blue); color: #fff; }
.mg-try-button-primary:hover { color: #fff; filter: brightness(1.08); }
.mg-try-icon-button { display: inline-flex; padding: 7px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
.mg-try-icon-button:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

.mg-try-actions { position: sticky; bottom: -24px; margin: 8px -20px -24px; padding: 14px 20px; background: var(--bg); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.mg-try-action-buttons { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.mg-try-form-error { color: var(--try-err); font-size: 13px; font-weight: 600; }
.mg-try-form-error:empty { display: none; }
.mg-try-send {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--mg-blue); color: #fff; font: 700 14px/1.2 inherit; font-family: inherit; box-shadow: 0 2px 8px rgb(19 123 245 / 35%);
}
.mg-try-send:hover { filter: brightness(1.08); }
.mg-try-send:disabled { opacity: 0.6; cursor: progress; }
.mg-try-send-kbd { font: 11px ui-monospace, monospace; padding: 1px 6px; border-radius: 4px; background: rgb(255 255 255 / 20%); }

.mg-try-alert { margin: 10px 0; padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; font-size: 13.5px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.mg-try-alert p { margin: 0; flex: 1 1 260px; }
.mg-try-alert-ok { background: var(--try-ok-bg); border-color: color-mix(in srgb, var(--try-ok) 30%, transparent); }
.mg-try-alert-warn { background: var(--try-warn-bg); border-color: color-mix(in srgb, var(--try-warn) 30%, transparent); }
.mg-try-alert-error, .mg-try-alert-danger { background: var(--try-err-bg); border-color: color-mix(in srgb, var(--try-err) 30%, transparent); }

.mg-try-response-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mg-try-response-title { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mg-try-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mg-try-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mg-try-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mg-try-status.is-ok { color: var(--try-ok); background: var(--try-ok-bg); }
.mg-try-status.is-warn { color: var(--try-warn); background: var(--try-warn-bg); }
.mg-try-status.is-error { color: var(--try-err); background: var(--try-err-bg); }
.mg-try-meta-item { font: 12.5px ui-monospace, monospace; color: var(--text-muted); padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.mg-try-env-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); }
.mg-try-env-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.mg-try-env-line code { font-size: 12.5px; overflow-wrap: anywhere; }
.mg-try-session { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 12.5px; white-space: nowrap; }
.mg-try-session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.mg-try-session-dot.is-ok { background: var(--try-ok); box-shadow: 0 0 0 3px var(--try-ok-bg); }
.mg-try-session-label { font-weight: 600; }
.mg-try-link-button { border: 0; padding: 0; background: none; color: var(--link); font: 600 12.5px inherit; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.mg-try-errors { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.mg-try-errors h4, .mg-try-expected h4 { margin: 0 0 6px; font-size: 13px; }
.mg-try-errors ul, .mg-try-expected ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mg-try-errors li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13.5px; }
.mg-try-errors li code { color: var(--try-err); font-weight: 600; }
.mg-try-documented { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 12px; font-size: 13px; color: var(--text-muted); }

.mg-try-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 48px 12px 28px; }
.mg-try-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); margin-bottom: 8px; }
.mg-try-empty-title { margin: 0; font-weight: 600; }
.mg-try-expected { margin-top: 8px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; }
.mg-try-expected-item { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.mg-try-status-chip { flex-shrink: 0; min-width: 40px; text-align: center; font: 700 12px/1.6 ui-monospace, monospace; border-radius: 6px; padding: 0 6px; }
.mg-try-status-chip.is-ok { color: var(--try-ok); background: var(--try-ok-bg); }
.mg-try-status-chip.is-warn { color: var(--try-warn); background: var(--try-warn-bg); }
.mg-try-status-chip.is-error { color: var(--try-err); background: var(--try-err-bg); }

.mg-try-progress { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: var(--accent-soft); margin: 6px 0 14px; }
.mg-try-progress span { position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); border-radius: 3px; animation: mg-try-slide 1.1s ease-in-out infinite; }
@keyframes mg-try-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.mg-try-loading { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.mg-try-loading > div { flex: 1; min-width: 0; }
.mg-try-loading-title { margin: 0; font-weight: 600; }
.mg-try-url { overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
.mg-try-elapsed { font: 600 13px ui-monospace, monospace; color: var(--accent); font-variant-numeric: tabular-nums; }
.mg-try-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: mg-try-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes mg-try-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-try-progress span, .mg-try-spinner { animation-duration: 3s; } }

.mg-try-tabset { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; }
.mg-try-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.mg-try-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font: 600 13px inherit; font-family: inherit; cursor: pointer; margin-bottom: -1px; }
.mg-try-tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); }
.mg-try-tab-count { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.mg-try-tab-panel { padding: 12px; }
.mg-try-tab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mg-try-view-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mg-try-toggles { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.mg-try-toggle { border: 0; padding: 4px 12px; background: transparent; color: var(--text-muted); font: 600 12.5px inherit; font-family: inherit; cursor: pointer; }
.mg-try-toggle[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); }
.mg-try-code { margin: 0; padding: 12px 14px; max-height: 460px; overflow: auto; border-radius: 8px; background: var(--code-bg); border: 1px solid var(--border); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.mg-try-code code { background: none; padding: 0; font: inherit; }
.mg-j-key { color: #0b5cad; } .mg-j-str { color: #0a7f4f; } .mg-j-num { color: #b45309; } .mg-j-bool { color: #7c3aed; } .mg-j-null { color: #94a3b8; font-style: italic; }
.mg-j-punct, .mg-j-count { color: var(--text-muted); }
:root[data-theme='dark'] .mg-j-key { color: #7fb0ff; } :root[data-theme='dark'] .mg-j-str { color: #6ee7b7; } :root[data-theme='dark'] .mg-j-num { color: #fbbf24; } :root[data-theme='dark'] .mg-j-bool { color: #c4b5fd; }
.mg-try-tree { max-height: 460px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--code-bg); border: 1px solid var(--border); font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mg-j-node > summary { cursor: pointer; list-style: none; border-radius: 4px; }
.mg-j-node > summary::-webkit-details-marker { display: none; }
.mg-j-node > summary::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--text-muted); transition: transform 100ms; }
.mg-j-node[open] > summary::before { transform: rotate(90deg); }
.mg-j-node[open] > summary .mg-j-count, .mg-j-node[open] > summary .mg-j-close-inline { display: none; }
.mg-j-node:not([open]) > .mg-j-close { display: none; }
.mg-j-children { padding-left: 1.1em; margin-left: 0.45em; border-left: 1px dashed var(--border); }
.mg-j-leaf { padding-left: 1.1em; }
.mg-j-close { padding-left: 1.1em; }
.mg-try-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.mg-try-table th, .mg-try-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.mg-try-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.mg-try-request-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.mg-try-request-line code { overflow-wrap: anywhere; }
.mg-try-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border: 1px dashed var(--border); border-radius: 9px; }
.mg-try-file p { margin: 0; }

@media (max-width: 900px) {
  .mg-try-backdrop { padding: 0; }
  .mg-try { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .mg-try-panes { display: block; overflow: auto; }
  .mg-try-request, .mg-try-response { overflow: visible; padding: 16px; }
  .mg-try-request { border-right: 0; border-bottom: 1px solid var(--border); }
  .mg-try-actions { position: static; margin: 8px -16px 0; padding: 12px 16px; }
  .mg-try-head { flex-direction: column; padding: 14px 16px; }
  .mg-try-head-tools { width: 100%; }
  .mg-try-head-tools { flex-wrap: wrap; }
  .mg-try-op-select { max-width: none; flex: 1; }
  .mg-try-action-buttons { justify-content: stretch; }
  .mg-try-action-buttons > * { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------------ Side scrollbars */
/* The guide sidebar, the contents list and the reference sidebar hide the browser's scrollbar (its width
   depends on the browser and the OS setting) and show a 3px overlay bar instead, drawn by client.js. It
   takes no space, fades in on hover and while scrolling, and can be dragged. The selector list is shared
   with SIDE_SCROLLERS in client.js. */
:is(.mg-sidebar, .mg-toc, .mg-redoc .menu-content > div:has(> [data-component-name='Menu/Menu'])) { scrollbar-width: none; }
:is(.mg-sidebar, .mg-toc, .mg-redoc .menu-content > div:has(> [data-component-name='Menu/Menu']))::-webkit-scrollbar { display: none; }
.mg-redoc .menu-content > div:has(> [data-component-name='Menu/Menu']) { position: relative; }
.mg-scroll-thumb {
  position: absolute; top: 0; right: 2px; z-index: 5; width: 3px; min-height: 32px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  opacity: 0; transition: opacity 0.25s, width 0.15s, background 0.15s; touch-action: none; cursor: default;
}
:is(.mg-sidebar, .mg-toc, .mg-redoc .menu-content > div:has(> [data-component-name='Menu/Menu'])):is(:hover, :focus-within, .is-scrolling) > .mg-scroll-thumb { opacity: 1; }
.mg-scroll-thumb:hover, .mg-scroll-thumb.is-dragging { width: 6px; background: color-mix(in srgb, var(--text-muted) 65%, transparent); }
.mg-scroll-thumb[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mg-scroll-thumb { transition: none; } }

/* ------------------------------------------------------------------ Header: Ask AI and Support */
.mg-ask-button {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.mg-ask-button .mg-svg-icon { color: var(--accent); font-size: 16px; }
.mg-ask-button:hover, .mg-ask-button[aria-expanded='true'] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mg-ask-button kbd { font: 11px ui-monospace, monospace; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.mg-support-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 6px 8px; border-radius: 8px; }
.mg-support-link .mg-svg-icon { font-size: 16px; }
.mg-support-link:hover { color: var(--text); background: var(--bg-subtle); }

/* ------------------------------------------------------------------ Article head, page actions, help bar */
.mg-article-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.mg-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.mg-eyebrow .mg-svg-icon { font-size: 15px; }
.mg-page-actions { display: flex; gap: 6px; }
.mg-page-action {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-raised); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.mg-page-action:hover { color: var(--text); border-color: var(--accent); }
.mg-page-action .mg-svg-icon { font-size: 15px; }
.mg-button {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mg-button:hover { border-color: var(--accent); color: var(--accent); }
.mg-button-primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.mg-button-primary:hover { color: #fff; filter: brightness(1.06); box-shadow: var(--shadow-lift); }
.mg-help-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding: 20px 24px;
  border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-subtle));
}
.mg-help-text { display: grid; gap: 2px; }
.mg-help-text span { color: var(--text-muted); font-size: 14.5px; }
.mg-help-actions { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ Assistant (assistant.js) */
.mg-assistant {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 30; width: var(--assistant-w); max-width: 100vw;
  display: flex; flex-direction: column; background: var(--bg); color: var(--text); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgb(8 39 92 / 10%); animation: mg-assistant-in 180ms ease-out; transition: width 180ms ease-out;
}
.mg-assistant.is-expanded { --assistant-w: min(720px, 60vw); }
.mg-assistant[hidden] { display: none; }
@keyframes mg-assistant-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mg-assistant { animation: none; transition: none; } }
/* On wide screens the page moves over so the drawer never covers what you're reading. The reference has
   three columns of its own, so it only moves over on very wide screens; elsewhere the drawer overlays. */
.mg-shell, .is-reference .mg-main, .mg-header { transition: margin-right 180ms ease-out, padding-right 180ms ease-out; }
html.mg-assistant-wide { --assistant-w: min(720px, 60vw); }
@media (min-width: 1200px) {
  html.mg-assistant-open body:not(.is-reference) .mg-shell { margin-right: var(--assistant-w); }
  html.mg-assistant-open body:not(.is-reference) .mg-header { padding-right: calc(var(--assistant-w) + 20px); }
}
@media (min-width: 1700px) {
  html.mg-assistant-open body.is-reference .mg-main { margin-right: var(--assistant-w); }
  html.mg-assistant-open body.is-reference .mg-header { padding-right: calc(var(--assistant-w) + 20px); }
}
.mg-assistant svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mg-assistant svg.mg-i-fill { fill: currentColor; stroke: none; }
.mg-assistant-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
.mg-assistant-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.mg-assistant-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
.mg-assistant-tools { display: flex; gap: 2px; }
.mg-assistant-icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.mg-assistant-icon-button:hover { background: var(--bg-subtle); color: var(--text); }
.mg-assistant-icon-button[hidden] { display: none; }
.mg-assistant-context { display: flex; align-items: center; gap: 6px; margin: 0 16px 10px; font-size: 12.5px; min-width: 0; }
.mg-assistant-context-label { color: var(--text-muted); flex: none; }
.mg-assistant-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mg-assistant-chip-clear { flex: none; border: 0; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mg-assistant-chip-clear:hover { color: var(--text); background: var(--bg-subtle); }
.mg-assistant-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.mg-assistant-welcome { display: flex; flex-direction: column; gap: 16px; }
.mg-assistant-welcome[hidden], .mg-assistant-status[hidden] { display: none; }
.mg-assistant-intro { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-subtle)); }
.mg-assistant-intro p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.mg-assistant-intro .mg-assistant-intro-title { margin-bottom: 4px; color: var(--text); font-weight: 700; font-size: 14px; }
/* Where questions go and what not to paste, under the intro. */
.mg-assistant-intro .mg-assistant-muted { margin-top: 8px; font-size: 12.5px; }
.mg-assistant-intro-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-gradient); color: #fff; }
.mg-assistant-intro-icon svg { width: 18px; height: 18px; }
.mg-assistant-suggestions h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.mg-assistant-suggestions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-assistant-suggestions button {
  width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised);
  color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.mg-assistant-suggestions button:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Status cards (connecting, can't answer right now). */
.mg-assistant-card { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.55; }
.mg-assistant-card p { margin: 0; }
.mg-assistant-card-title { font-weight: 700; }
.mg-assistant-muted { color: var(--text-muted); font-size: 12.5px; }
.mg-assistant-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-raised); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mg-assistant-button:hover { border-color: var(--accent); color: var(--accent); }
.mg-assistant-button-link { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--link); }
.mg-assistant-button-link:hover { text-decoration: underline; }
.mg-assistant-icon-button.is-active { color: var(--accent); background: var(--accent-soft); }
.mg-assistant-text-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: inherit; cursor: pointer; }
.mg-assistant-text-button:hover { text-decoration: underline; }
.mg-assistant-text-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-assistant-private { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.mg-assistant-private-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--tip); flex: none; }
.mg-assistant-private-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-assistant-button-danger { border-color: var(--danger); color: var(--danger); }
.mg-assistant-button-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* History panel: private to the reader's browser. It and the conversation take turns; `hidden` must win over their display. */
.mg-assistant-history[hidden], .mg-assistant-thread[hidden], .mg-history-confirm[hidden], .mg-history-clear[hidden] { display: none; }
.mg-assistant-history { display: grid; gap: 14px; align-content: start; font-size: 13.5px; }
.mg-history-head { display: grid; gap: 6px; }
.mg-history-head h3 { margin: 0; font-size: 1.05rem; outline: none; }
.mg-history-back { justify-self: start; font-size: 13px; }
.mg-history-privacy { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--tip) 35%, var(--border)); border-radius: 12px; background: var(--tip-bg); line-height: 1.5; }
.mg-history-privacy p { margin: 0 0 4px; }
.mg-history-privacy p:last-child { margin: 0; }
.mg-history-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mg-history-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.mg-history-stat strong { font-size: 1.25rem; line-height: 1.2; color: var(--text); }
.mg-history-stat span { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.mg-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-history-list li { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); transition: border-color 0.12s; }
.mg-history-list li:hover, .mg-history-list li:focus-within { border-color: var(--accent); }
.mg-history-list li.is-current { border-color: var(--accent); background: var(--accent-soft); }
.mg-history-open { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; border-radius: 12px; }
.mg-history-open:disabled { cursor: not-allowed; opacity: 0.6; }
.mg-history-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-history-meta { font-size: 12px; color: var(--text-muted); }
.mg-history-delete { margin-right: 6px; flex: none; }
.mg-history-delete:hover { color: var(--danger); }
.mg-history-empty { margin: 0; color: var(--text-muted); }
.mg-history-clear { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.mg-history-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-history-confirm { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-bg); }
.mg-history-confirm p { margin: 0; }
.mg-history-confirm-actions { display: flex; gap: 8px; }
@media (max-width: 420px) { .mg-history-usage { grid-template-columns: 1fr; } }
.mg-assistant-handoff { display: flex; flex-wrap: wrap; gap: 8px; }

/* The conversation. */
.mg-assistant-thread { display: flex; flex-direction: column; gap: 22px; }
.mg-assistant-thread:empty { display: none; }
.mg-chat-turn { display: flex; flex-direction: column; gap: 12px; }
.mg-chat-question {
  align-self: flex-end; max-width: 88%; margin: 0; padding: 9px 13px; border-radius: 14px 14px 4px 14px;
  background: var(--accent-soft); color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mg-chat-question[hidden] { display: none; }
.mg-chat-pending { opacity: 0.75; }
.mg-chat-answer { display: flex; gap: 10px; align-items: flex-start; }
.mg-chat-avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 8px; background: var(--accent-gradient); color: #fff; }
.mg-chat-avatar svg { width: 14px; height: 14px; }
.mg-chat-answer-main { min-width: 0; flex: 1; }
.mg-chat-answer-body { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.mg-chat-answer-body > :first-child { margin-top: 0; }
.mg-chat-answer-body > :last-child { margin-bottom: 0; }
.mg-chat-answer-body p, .mg-chat-answer-body ul, .mg-chat-answer-body ol { margin: 0 0 10px; }
.mg-chat-answer-body ul, .mg-chat-answer-body ol { padding-left: 20px; }
.mg-chat-answer-body h1, .mg-chat-answer-body h2, .mg-chat-answer-body h3 { font-size: 14.5px; margin: 14px 0 6px; }
.mg-chat-answer-body :not(pre) > code { padding: 0.1em 0.35em; border-radius: 5px; border: 1px solid var(--border); background: var(--code-bg); font-size: 0.86em; }
.mg-chat-answer-body pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--code-bg); overflow-x: auto; font-size: 12.5px; line-height: 1.5; }
.mg-chat-answer-body a { color: var(--link); }
.mg-chat-answer-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 13px; margin: 0 0 10px; }
.mg-chat-answer-body th, .mg-chat-answer-body td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.mg-chat-answer-body.is-streaming:empty::before, .mg-chat-answer-body.is-streaming > :last-child::after {
  content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; border-radius: 2px;
  background: var(--accent); animation: mg-caret 1s steps(2, start) infinite;
}
@keyframes mg-caret { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .mg-chat-answer-body.is-streaming > :last-child::after { animation: none; } }
/* Citations in an answer: a pill naming the guide, endpoint or webhook it links to. */
.mg-cites { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 2px; vertical-align: baseline; }
.mg-chat-answer-body a.mg-cite {
  display: inline-flex; align-items: center; gap: 4px; max-width: 16rem; padding: 0 7px 0 5px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-raised); color: var(--text); font-size: 11.5px; font-weight: 500; line-height: 18px; text-decoration: none; white-space: nowrap;
  vertical-align: baseline; transition: border-color 0.12s, color 0.12s;
}
.mg-chat-answer-body a.mg-cite:hover, .mg-chat-answer-body a.mg-cite:focus-visible { border-color: var(--accent); color: var(--accent); }
.mg-cite-name { overflow: hidden; text-overflow: ellipsis; }
.mg-cite-icon { display: grid; flex: none; color: var(--accent); }
.mg-cite-icon svg { width: 11px; height: 11px; }
.mg-cite-webhook .mg-cite-icon, .mg-chat-source-card-webhook .mg-chat-source-icon { color: var(--warning); }
.mg-cite-endpoint .mg-cite-icon, .mg-chat-source-card-endpoint .mg-chat-source-icon { color: var(--mg-green); }

/* Code blocks in answers: the guides' container (language label, Copy), sized for the drawer. */
.mg-chat-answer-body .mg-code { margin: 0 0 10px; }
.mg-chat-answer-body .mg-code pre.hljs { padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.mg-chat-answer-body .mg-code::before { padding: 5px 12px; }

/* Where to go next: the pages an answer used, grouped by what they are. */
.mg-chat-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.mg-chat-sources-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.mg-chat-source-group { margin-top: 8px; }
.mg-chat-source-group-title { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.mg-chat-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; container-type: inline-size; }
.mg-chat-source-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-raised); color: var(--text); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.mg-chat-source-card:hover, .mg-chat-source-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mg-chat-source-icon { display: grid; flex: none; color: var(--accent); }
.mg-chat-source-icon svg { width: 15px; height: 15px; }
.mg-chat-source-text { display: grid; gap: 1px; min-width: 0; }
.mg-chat-source-name { font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.mg-chat-source-detail { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-muted); }
.mg-chat-source-detail > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chat-source-method { flex: none; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.mg-chat-source-action { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--link); white-space: nowrap; }
.mg-chat-source-action svg { width: 13px; height: 13px; transition: transform 0.12s; }
.mg-chat-source-card:hover .mg-chat-source-action svg { transform: translateX(2px); }
/* The action's words only where they leave room for the route or breadcrumb; the arrow and the link's label remain. */
@container (max-width: 419px) { .mg-chat-source-action > span:first-child { display: none; } }
.mg-chat-actions { display: flex; gap: 4px; margin-top: 8px; }
.mg-chat-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.mg-chat-action:hover { background: var(--bg-subtle); color: var(--text); }
.mg-chat-action[hidden] { display: none; }
.mg-chat-action svg { width: 13px; height: 13px; }

/* The question box. */
.mg-assistant-form { padding: 10px 16px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.mg-assistant-input { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); padding: 8px 8px 8px 14px; transition: border-color 0.12s, box-shadow 0.12s; }
.mg-assistant-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mg-assistant-input textarea { flex: 1; display: block; min-height: 24px; max-height: 160px; padding: 4px 0; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; outline: none; }
.mg-assistant-input textarea::placeholder { color: var(--text-muted); }
.mg-assistant-send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--accent-gradient); color: #fff; cursor: pointer; }
.mg-assistant-send:hover { filter: brightness(1.08); }
.mg-assistant-send svg { width: 16px; height: 16px; stroke-width: 2.4; }
.mg-assistant-send.is-stop { background: var(--text); color: var(--bg); }
.mg-assistant-hint { margin: 7px 2px 0; font-size: 11.5px; color: var(--text-muted); }

/* The floating "Ask a question" bar on guide pages, centred on the article column. */
.mg-ask-bar {
  --ask-bar-left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w) - var(--toc-w)) / 2);
  position: fixed; left: var(--ask-bar-left); bottom: 18px; z-index: 12; width: min(560px, calc(100vw - var(--sidebar-w) - var(--toc-w) - 48px));
  transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px;
  border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-lift); transition: opacity 0.15s, transform 0.15s;
}
.mg-ask-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift); }
.mg-ask-bar input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.mg-ask-bar input::placeholder { color: var(--text-muted); }
.mg-ask-bar .mg-ask-ai-icon { display: grid; color: var(--accent); }
.mg-ask-bar .mg-ask-ai-icon svg { width: 16px; height: 16px; fill: currentColor; }
.mg-ask-bar .mg-ask-ai-send { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 11px; background: var(--accent-gradient); color: #fff; cursor: pointer; }
.mg-ask-bar .mg-ask-ai-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.mg-assistant-open .mg-ask-bar { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
/* Room at the end of the article so the bar never covers the last lines or the previous/next links. */
body:has(.mg-ask-bar) .mg-main { padding-bottom: 120px; }
@media (max-width: 1200px) { .mg-ask-bar { --toc-w: 0px; } }
@media (max-width: 860px) {
  .mg-ask-bar { --sidebar-w: 0px; --toc-w: 0px; bottom: 12px; width: calc(100vw - 24px); }
}

/* "Copy page" with its menu (pages.mjs copyPageMenu, client.js setUpCopyPage). */
.mg-split { position: relative; display: inline-flex; }
.mg-split .mg-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mg-split .mg-split-toggle { width: 30px; padding: 0; justify-content: center; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mg-split-toggle[aria-expanded='true'] { color: var(--text); border-color: var(--accent); }
.mg-split-toggle .mg-svg-icon { transition: transform 0.15s; }
.mg-split-toggle[aria-expanded='true'] .mg-svg-icon { transform: rotate(180deg); }
.mg-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; width: 290px; padding: 6px; display: grid; gap: 2px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); box-shadow: var(--shadow-lift);
  animation: mg-menu-in 120ms ease-out;
}
.mg-menu[hidden] { display: none; }
@keyframes mg-menu-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mg-menu { animation: none; } }
.mg-menu-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.mg-menu-item:hover, .mg-menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.mg-menu-icon { margin-top: 2px; font-size: 16px; color: var(--text-muted); }
.mg-menu-item:hover .mg-menu-icon, .mg-menu-item:focus-visible .mg-menu-icon { color: var(--accent); }
.mg-menu-text { display: grid; gap: 1px; }
.mg-menu-label { font-size: 13.5px; font-weight: 600; }
.mg-menu-hint { font-size: 12px; color: var(--text-muted); }

@media (max-width: 860px) {
  .mg-assistant, .mg-assistant.is-expanded { width: 100vw; }
  .mg-article-head { flex-direction: column; align-items: flex-start; }
  .mg-help-bar { padding: 16px; }
  .mg-menu { right: auto; left: 0; }
}

/* ------------------------------------------------------------------ Dark mode polish (html.dark, set by theme.js) */
/* Depth comes from lighter surfaces and a faint top highlight, not from shadows alone; the brand blue adds a soft glow. */
html.dark body { background: var(--bg) radial-gradient(900px 360px at 50% -120px, rgb(19 123 245 / 14%), transparent 70%) no-repeat; }
html.dark .mg-header { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: #1b2230; }
html.dark .mg-sidebar { background: color-mix(in srgb, var(--bg-subtle) 60%, transparent); }
html.dark :is(.mg-card, .mg-pager a, .mg-accordion, .mg-assistant-suggestions button, .mg-search) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), var(--shadow);
}
html.dark :is(.mg-card-linked:hover, .mg-card-linked:focus-within, .mg-pager a:hover) {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-lift);
}
html.dark .mg-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); }
html.dark .mg-code { background: var(--code-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); }
html.dark .mg-code::before { background: #0e131b; color: #8a96aa; }
html.dark .mg-article :not(pre) > code { background: #121823; border-color: #27303f; color: #d7e3ff; }
html.dark .mg-article th { background: #121823; }
html.dark .mg-diagram { background: var(--bg-subtle); }
html.dark .mg-admonition { border-left-width: 3px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); }
html.dark .mg-step::before { box-shadow: 0 0 0 4px var(--bg), 0 6px 16px rgb(19 123 245 / 35%); }
html.dark .mg-tablist { background: #0e131b; }
html.dark .mg-tablist [role='tab'][aria-selected='true'] { background: var(--bg-raised); }
html.dark :is(.mg-button-primary, .mg-try-it, .mg-assistant-send, .mg-ask-ai-send) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 6px 18px rgb(19 123 245 / 30%);
}
html.dark :is(.mg-button-primary, .mg-try-it):hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 10px 26px rgb(19 123 245 / 40%); }
html.dark .mg-help-bar { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-raised)), var(--bg-raised)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
html.dark .mg-assistant { background: color-mix(in srgb, var(--bg-subtle) 70%, var(--bg)); box-shadow: -16px 0 48px rgb(0 0 0 / 50%); }
html.dark .mg-assistant-intro { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--bg-raised)), var(--bg-raised)); }
html.dark .mg-assistant-form { background: var(--bg); }
html.dark .mg-assistant-input { background: var(--bg-raised); }
html.dark .mg-assistant-card { background: var(--bg-raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
html.dark .mg-chat-question { background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised)); }
html.dark .mg-ask-bar { background: color-mix(in srgb, var(--bg-raised) 88%, transparent); border-color: #2b3546; box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 16px 40px rgb(0 0 0 / 55%); }
html.dark .mg-menu { border-color: #2b3546; box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 20px 50px rgb(0 0 0 / 60%); }
html.dark .mg-search { border-color: #2b3546; box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 30px 80px rgb(0 0 0 / 70%); }
html.dark .mg-search::backdrop { background: rgb(2 6 12 / 70%); }
html.dark .mg-search-results [aria-selected='true'] a, html.dark .mg-search-results a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
html.dark .mg-search-icon { background: #1a2130; }
html.dark :is(.mg-search-button, .mg-ask-button, .mg-icon-button, .mg-page-action, .mg-button, .mg-support-link) { background: color-mix(in srgb, var(--bg-raised) 80%, transparent); }
html.dark .mg-ask-button:hover, html.dark .mg-ask-button[aria-expanded='true'] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
html.dark .mg-nav-section a.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
html.dark .mg-toc ul { border-left-color: #1f2735; }
html.dark ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
html.dark .mg-endpoint-bar { background: var(--bg-raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), var(--shadow); }
html.dark .mg-request-footer { background: #0e131b; }
html.dark .mg-ask-ai { background: var(--bg-raised); }
html.dark .mg-redoc :is(.panel-request-samples, .panel-response-samples) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), var(--shadow); }

/* Staff access on the site (deploy/nginx.conf): a quiet sign-in link for everyone, and on the drafts copy who is
   signed in. The sign-in page itself is preview/static/staff-sign-in.js. */
.mg-staff-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 13px; padding: 6px 8px; border-radius: 8px; min-height: 24px; }
.mg-staff-link:hover { color: var(--text); background: var(--bg-subtle); }
.mg-staff-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.mg-staff-bar form { margin: 0; }
.mg-staff-name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.mg-staff-sign-out { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.mg-staff-sign-out:hover { color: var(--text); background: var(--bg-subtle); }
:is(.mg-staff-link, .mg-staff-sign-out):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-staff-sign-in { max-width: 30rem; }
.mg-staff-form { display: grid; gap: 16px; margin: 24px 0; }
.mg-staff-form [hidden] { display: none; }
.mg-staff-field { display: grid; gap: 6px; margin-bottom: 12px; }
.mg-staff-field label { font-weight: 600; font-size: 14px; }
.mg-staff-field input { font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--text); }
.mg-staff-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.mg-staff-help { font-size: 13.5px; color: var(--text-muted); }
.mg-staff-message { margin: 0; color: var(--danger); font-size: 14px; }
.mg-staff-message:empty { display: none; }
.mg-staff-message.is-info { color: var(--text-muted); }
.mg-staff-form .mg-button { justify-self: start; }
.mg-staff-form .mg-button[aria-busy='true'] { opacity: 0.7; cursor: progress; }

/* ---------------------------------------------------------------------------------------------------------------
   Home page: hero, facts, pillars, showcase (guides/01-get-started/01-introduction.md; scene in static/hero.js).
   The colours come from the brand palette at the top of this file; the dark values are set per block below.
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --mg-hero-dot: rgba(8, 39, 92, 0.62);
  --mg-hero-halo: rgba(19, 123, 245, 0.14);
  --mg-hero-bg: radial-gradient(900px 420px at 12% 0%, rgba(19, 123, 245, 0.16), transparent 60%),
    radial-gradient(700px 420px at 92% 100%, rgba(22, 200, 138, 0.16), transparent 60%),
    linear-gradient(180deg, #f7f9fd, #ffffff);
  --mg-hero-grid: rgba(8, 39, 92, 0.07);
  --mg-hero-card-bg: rgba(255, 255, 255, 0.82);
  --mg-hero-card-border: rgba(8, 39, 92, 0.1);
  --mg-hero-card-gloss: rgba(255, 255, 255, 0.7);
}
:root[data-theme='dark'] {
  --mg-hero-dot: rgba(190, 210, 245, 0.55);
  --mg-hero-halo: rgba(93, 143, 250, 0.2);
  --mg-hero-bg: radial-gradient(900px 420px at 12% 0%, rgba(93, 143, 250, 0.22), transparent 60%),
    radial-gradient(700px 420px at 92% 100%, rgba(22, 200, 138, 0.18), transparent 60%),
    linear-gradient(180deg, #0f1522, #0c1017);
  --mg-hero-grid: rgba(190, 210, 245, 0.07);
  --mg-hero-card-bg: rgba(21, 27, 38, 0.8);
  --mg-hero-card-border: rgba(190, 210, 245, 0.14);
  --mg-hero-card-gloss: rgba(255, 255, 255, 0.07);
}

.has-hero .mg-article-head { margin-bottom: 18px; }

.mg-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: center;
  min-height: 460px; margin: 0 0 22px; padding: 44px 48px; border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
  background: var(--mg-hero-bg); box-shadow: var(--shadow);
}
/* A faint grid, fading towards the edges, gives the gradients a surface to sit on. */
.mg-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--mg-hero-grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--mg-hero-grid) 1px, transparent 1px) 0 0 / 44px 44px;
  mask: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 85%);
}
.mg-hero-copy { position: relative; z-index: 1; }
.mg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-raised); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted);
}
.mg-hero-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gradient); box-shadow: 0 0 0 4px var(--accent-soft); }
.mg-article .mg-hero-headline {
  margin: 0 0 18px; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.3rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800;
  background: linear-gradient(120deg, var(--text) 0%, var(--text) 55%, var(--mg-blue) 78%, var(--mg-green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-article .mg-hero-headline + p { font-size: 1.12rem; line-height: 1.6; color: var(--text-muted); max-width: 36em; margin: 0 0 24px; }
.mg-hero-actions p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mg-hero-actions a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mg-hero-actions a:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.mg-hero-actions a:first-child { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.mg-hero-actions a:first-child::after { content: '→'; transition: transform 0.15s; }
.mg-hero-actions a:first-child:hover::after { transform: translateX(3px); }
.mg-article .mg-hero-actions a[href^='http']::after { display: none; }

/* The scene: the globe behind, the three cards in front, each on its own depth. */
.mg-hero-scene { position: relative; min-height: 380px; perspective: 1100px; }
.mg-hero-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mg-hero-stack {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: end; gap: 14px; padding: 0 2% 0 8px;
  transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mg-hero-card {
  position: relative; display: grid; gap: 6px; width: min(100%, 320px); padding: 14px 16px 14px 18px; border-radius: 16px;
  border: 1px solid var(--mg-hero-card-border); background: var(--mg-hero-card-bg); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  background-image: linear-gradient(180deg, var(--mg-hero-card-gloss), transparent 45%);
  box-shadow: 0 24px 48px rgb(8 39 92 / 16%), 0 2px 6px rgb(8 39 92 / 6%), inset 0 1px 0 rgba(255, 255, 255, 0.5); font-size: 13.5px; line-height: 1.4;
  transform: translateZ(var(--z, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease, border-color 0.2s;
  animation: mg-hero-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both, mg-hero-float 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.8s);
  overflow: hidden;
}
.mg-hero-card strong { font-weight: 650; letter-spacing: -0.01em; font-size: 14px; }
.mg-hero-card.is-payout { --z: 70px; --delay: 0.05s; margin-right: 18%; --edge: var(--mg-blue); }
.mg-hero-card.is-ledger { --z: 35px; --delay: 0.25s; margin-right: 9%; --edge: var(--mg-navy); }
.mg-hero-card.is-webhook { --z: 0px; --delay: 0.45s; --edge: var(--mg-green); }
:root[data-theme='dark'] .mg-hero-card.is-ledger { --edge: var(--mg-blue-soft); }
/* The accent bar on the left, and a light that runs round the edge (a conic gradient, masked to the 1px border). */
.mg-hero-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 16px 0 0 16px; background: var(--edge); }
.mg-hero-card::after {
  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: 16px; pointer-events: none;
  background: conic-gradient(from var(--mg-hero-angle), transparent 0 58%, color-mix(in srgb, var(--mg-blue) 90%, transparent) 72%, color-mix(in srgb, var(--mg-green) 90%, transparent) 84%, transparent 100%);
  /* Both shorthands first: each resets the composite longhand, which must come last to keep only the border ring. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mg-hero-edge 7s linear infinite; animation-delay: var(--delay, 0s);
}
.mg-hero-card-top { display: flex; align-items: center; gap: 8px; }
.mg-hero-card-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--edge), color-mix(in srgb, var(--edge) 60%, var(--mg-green))); box-shadow: 0 4px 10px color-mix(in srgb, var(--edge) 35%, transparent); font-size: 14px; }
.mg-hero-card-icon .mg-svg-icon { font-size: 14px; }
.mg-hero-card-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.01em; color: var(--text-muted); }
.mg-hero-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.mg-hero-chip { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--info); background: var(--info-bg); }
.mg-hero-chip.is-neutral { color: var(--text-muted); background: var(--bg-subtle); }
.mg-hero-chip.is-done { color: var(--tip); background: var(--tip-bg); }
.mg-hero-card-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.mg-hero-card-note.is-signed { color: var(--tip); font-family: inherit; font-weight: 600; font-size: 11.5px; }
.mg-hero-card-note .mg-svg-icon { font-size: 13px; }
/* The payout's meter: a bar with a light sweeping along it while the bank works. */
.mg-hero-meter { position: relative; flex: 1 1 auto; max-width: 110px; height: 4px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.mg-hero-meter i { position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: 4px; background: var(--accent-gradient); animation: mg-hero-sweep 1.8s ease-in-out infinite; }
/* The flow between the cards: payout, then its ledger entry, then its webhook. */
.mg-hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateZ(20px); }
.mg-hero-flow-glow { fill: none; stroke: var(--mg-green); stroke-width: 7; stroke-linecap: round; opacity: 0.14; }
.mg-hero-flow-line { fill: none; stroke: var(--mg-blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0.6; animation: mg-hero-dash 1.6s linear infinite; }
@property --mg-hero-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mg-hero-edge { to { --mg-hero-angle: 360deg; } }
@keyframes mg-hero-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } }
@keyframes mg-hero-dash { to { stroke-dashoffset: -28; } }
@keyframes mg-hero-rise { from { opacity: 0; transform: translateZ(var(--z, 0px)) translateY(22px) rotateX(10deg); } to { opacity: 1; transform: translateZ(var(--z, 0px)); } }
@keyframes mg-hero-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Facts: four quiet proof points under the hero. */
.mg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.mg-fact { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow); overflow: hidden; }
.mg-fact .mg-icon { width: 36px; height: 36px; }
.mg-fact-body { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.mg-fact-label { display: block; margin-bottom: 2px; font-size: 14px; color: var(--text); }
.mg-fact-body p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

/* Pillars: who the platform is for, three up. */
.mg-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0; }
.mg-pillar { position: relative; padding: 20px 20px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-raised); box-shadow: var(--shadow); overflow: hidden; }
.mg-pillar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-gradient); }
.mg-pillar-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.mg-pillar-body ul { margin: 0; padding-left: 1.1em; }
.mg-pillar-body li { margin: 0.35em 0; font-size: 14.5px; color: var(--text-muted); }
.mg-pillar-body li::marker { color: var(--accent); }

/* Showcase: the one call, words on the left and the request on the right, on a dark panel. The request is the
   point, so it gets the wider column and its own dark token colours (the page's highlight.js theme is the light one). */
.mg-showcase { position: relative; margin: 1.2em 0; padding: 28px 32px; border-radius: 20px; background: linear-gradient(135deg, #08275c, #0c1a3b 60%, #0f2a2a); color: #e9eef7; box-shadow: var(--shadow-lift); overflow: hidden; }
.mg-showcase .mg-columns { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
.mg-showcase p, .mg-showcase li { color: rgba(233, 238, 247, 0.86); }
.mg-showcase a { color: #9fd0ff; }
.mg-showcase :not(pre) > code { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); color: #e9eef7; }
.mg-showcase .mg-code { margin: 0; border: 1px solid rgba(255, 255, 255, 0.22); background: #06101f; box-shadow: 0 16px 40px rgb(0 0 0 / 35%), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mg-showcase .mg-code::before { background: rgba(255, 255, 255, 0.08); color: #c9d4e8; border-bottom-color: rgba(255, 255, 255, 0.14); }
.mg-showcase .mg-code pre.hljs { background: transparent; color: #f2f6fc; font-size: 13.5px; line-height: 1.6; padding: 18px 20px; }
.mg-showcase .mg-copy { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #f2f6fc; }
.mg-showcase .hljs-string { color: #a5d6ff; }
.mg-showcase .hljs-variable, .mg-showcase .hljs-template-variable, .mg-showcase .hljs-built_in { color: #ffb37a; }
.mg-showcase .hljs-keyword, .mg-showcase .hljs-selector-tag { color: #ff7b72; }
.mg-showcase .hljs-attr, .mg-showcase .hljs-number, .mg-showcase .hljs-literal, .mg-showcase .hljs-meta { color: #79c0ff; }
.mg-showcase .hljs-comment { color: #9aa7bd; }
.mg-showcase .hljs-title, .mg-showcase .hljs-symbol { color: #d2a8ff; }
.mg-showcase .mg-column > :first-child { margin-top: 0; }
.mg-showcase .mg-column > :last-child { margin-bottom: 0; }

/* Journey: "Getting access" as four numbered stages on one track; a column on a phone. */
.mg-journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0; padding: 0; list-style: none; counter-reset: stage; }
.mg-journey::before { content: ''; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: var(--accent-gradient); opacity: 0.45; }
.mg-stage { position: relative; counter-increment: stage; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-raised); box-shadow: var(--shadow); overflow: hidden; }
.mg-stage::before { content: counter(stage, decimal-leading-zero); position: absolute; top: 10px; right: 14px; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--accent); opacity: 0.16; }
.mg-stage-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; }
.mg-stage-head .mg-icon { width: 34px; height: 34px; }
.mg-stage-body p { margin: 0 0 0.6em; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.mg-stage-body p:last-child { margin-bottom: 0; }
.mg-stage-body strong { color: var(--text); }
.mg-stage-who { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }

/* Key terms: a definition list as a grid of small cards. */
.mg-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 1.2em 0; }
.mg-term { position: relative; padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow); overflow: hidden; }
.mg-term::before { content: ''; position: absolute; inset: 14px auto 14px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-gradient); }
.mg-term dt { margin: 0 0 4px; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.mg-term dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.mg-term dd p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

/* Support: who to write to, what to include, and what never to send. */
.mg-support { position: relative; margin: 1.2em 0; padding: 28px 32px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-raised) 55%, var(--tip-bg)); box-shadow: var(--shadow); overflow: hidden; }
.mg-support .mg-columns { gap: 28px; align-items: start; }
.mg-support .mg-column > :first-child { margin-top: 0; }
.mg-support .mg-column > :last-child { margin-bottom: 0; }
.mg-support-lead { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 6px; }
.mg-support ul { list-style: none; margin: 0.4em 0 0; padding: 0; }
.mg-support li { position: relative; margin: 0.45em 0; padding-left: 26px; font-size: 14.5px; color: var(--text); }
.mg-support li::before { content: ''; position: absolute; left: 0; top: 0.2em; width: 17px; height: 17px; border-radius: 50%; background: var(--tip); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000); mask-composite: exclude; -webkit-mask-composite: xor; }
.mg-support .mg-admonition { margin: 20px 0 0; }
.mg-legal { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }

/* The cursor's light on a card or section (a span home.js adds on first hover), and the lean towards the cursor. */
.mg-spot { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(19, 123, 245, 0.16), rgba(22, 200, 138, 0.06) 45%, transparent 70%); }
:root[data-theme='dark'] .mg-spot { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(93, 143, 250, 0.24), rgba(22, 200, 138, 0.08) 45%, transparent 70%); }
.mg-showcase .mg-spot { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 70%); }
.is-lit > .mg-spot { opacity: 1; }
.mg-fact.is-lit, .mg-pillar.is-lit, .mg-stage.is-lit, .mg-term.is-lit, .mg-support.is-lit, .has-hero .mg-card.is-lit, .mg-hero-card.is-lit { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.mg-fact, .mg-pillar, .mg-stage, .mg-term, .has-hero .mg-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.3s ease, border-color 0.2s, box-shadow 0.2s; }
.mg-fact.is-lit, .mg-pillar.is-lit, .mg-stage.is-lit, .mg-term.is-lit { box-shadow: var(--shadow-lift); }
.has-hero .mg-card-linked:hover, .has-hero .mg-card-linked:focus-within { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); }

@media (max-width: 1100px) {
  .mg-hero { grid-template-columns: 1fr; padding: 36px 32px; min-height: 0; }
  .mg-hero-scene { min-height: 340px; }
  .mg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-journey::before { display: none; }
  .mg-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mg-hero { padding: 28px 20px; border-radius: 18px; }
  .mg-hero-scene { min-height: 300px; }
  /* Less depth on a phone: a card lifted 70px towards the viewer draws wider than its box and would be clipped. */
  .mg-hero-stack { padding: 0 10px 0 0; }
  .mg-hero-card { width: min(100%, 280px); }
  .mg-hero-card.is-payout { --z: 30px; }
  .mg-hero-card.is-ledger { --z: 15px; }
  .mg-pillars, .mg-journey { grid-template-columns: 1fr; }
  .mg-showcase, .mg-support { padding: 20px 16px; }
  .mg-support .mg-columns { grid-template-columns: 1fr; }
  .mg-showcase .mg-columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mg-facts, .mg-terms { grid-template-columns: 1fr; }
  .mg-hero-actions a { flex: 1 1 100%; justify-content: center; }
  .mg-hero-card.is-payout, .mg-hero-card.is-ledger { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-hero-card, .mg-hero-card::after, .mg-hero-meter i, .mg-hero-flow-line { animation: none; }
  .mg-hero-stack, .mg-hero-actions a, .mg-hero-actions a:first-child::after, .mg-fact, .mg-pillar, .mg-stage, .mg-term, .has-hero .mg-card, .mg-hero-card, .mg-spot { transition: none; }
}