/* =============================================================================
   Proxmox AI — documentation shell.
   One theme for every doc page: the install guide, the MCP guide and the full
   reference each used to ship their own stylesheet, so the same product looked
   like three products. Layout is the one the reader expects from a docs site:
   a fixed nav on the left, the page in the middle, its own headings on the right.
   ============================================================================= */

:root {
  --dx-page: #ffffff;
  --dx-soft: #f6f8fb;
  --dx-sunk: #eef2f8;
  --dx-line: #e3e8ef;
  --dx-line-soft: #eef1f6;
  --dx-text: #111418;
  --dx-dim: #4d545e;
  --dx-faint: #79828f;
  --dx-accent: #1f6fe0;
  --dx-accent-ink: #1a4cb0;
  --dx-accent-wash: #eaf0fd;
  --dx-good: #1F7A4D;
  --dx-good-wash: #e8f5ee;
  --dx-warn: #8a5f00;
  --dx-warn-wash: #fdf6e6;
  --dx-danger: #b3261e;
  --dx-danger-wash: #fdeceb;
  --dx-ink: #12151b;
  --dx-ink-line: #2b323d;
  --dx-ink-text: #e7eaf0;
  --dx-ink-dim: #8b94a1;
  --dx-mark-top: #1f6fe0;
  --dx-mark-left: #1F7A4D;
  --dx-mark-right: #F4B400;
  --dx-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dx-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --dx-side: 276px;
  --dx-toc: 230px;
  color-scheme: light;
}
:root[data-dx-theme="dark"] {
  --dx-page: #0f1216;
  --dx-soft: #151a21;
  --dx-sunk: #1b222b;
  --dx-line: #262e38;
  --dx-line-soft: #1e252e;
  --dx-text: #e7eaf0;
  --dx-dim: #aeb6c2;
  --dx-faint: #818b98;
  --dx-accent: #5B9CFF;
  --dx-accent-ink: #8ab4ff;
  --dx-accent-wash: #16233a;
  --dx-good: #4ec98a;
  --dx-good-wash: #112a1e;
  --dx-warn: #e8bb50;
  --dx-warn-wash: #2b2314;
  --dx-danger: #f2857c;
  --dx-danger-wash: #2e1715;
  --dx-ink: #060809;
  --dx-ink-line: #262e38;
  --dx-mark-top: #5B9CFF;
  --dx-mark-left: #2A9D66;
  --dx-mark-right: #FFC72C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--dx-page);
  color: var(--dx-text);
  font-family: var(--dx-sans);
  font-size: 15.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* ---- shell ---- */
.dx { display: grid; grid-template-columns: var(--dx-side) minmax(0, 1fr) var(--dx-toc); align-items: start; }
.dx-side {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  border-right: 1px solid var(--dx-line); background: var(--dx-soft);
  padding: 20px 14px 28px; display: flex; flex-direction: column; gap: 14px;
}
.dx-main { min-width: 0; }
.dx-tocbar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 26px 20px 28px 8px; }

/* ---- brand ---- */
.dx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dx-text); padding: 2px 8px 0; }
.dx-brand img { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.dx-brand b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; display: block; }
.dx-brand small { font-size: 11.5px; color: var(--dx-faint); font-weight: 400; letter-spacing: 0; }

/* ---- search ---- */
.dx-search { position: relative; padding: 0 6px; }
.dx-search input {
  width: 100%; font: 400 13.5px/1 var(--dx-sans); color: var(--dx-text);
  background: var(--dx-page); border: 1px solid var(--dx-line); border-radius: 9px;
  padding: 9px 11px 9px 32px; outline: none;
}
.dx-search input:focus { border-color: var(--dx-accent); box-shadow: 0 0 0 3px var(--dx-accent-wash); }
.dx-search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--dx-faint); pointer-events: none; }
.dx-count { font-family: var(--dx-mono); font-size: 11px; color: var(--dx-faint); padding: 0 8px; min-height: 15px; }

/* ---- sidebar nav ---- */
.dx-nav { display: flex; flex-direction: column; gap: 1px; }
.dx-nav p {
  margin: 16px 0 5px; padding: 0 8px; font-family: var(--dx-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dx-faint);
}
.dx-nav p:first-child { margin-top: 2px; }
.dx-nav a {
  display: block; padding: 6px 9px; border-radius: 7px; text-decoration: none;
  color: var(--dx-dim); font-size: 13.8px; line-height: 1.45;
}
.dx-nav a:hover { background: var(--dx-sunk); color: var(--dx-text); }
.dx-nav a.sub { padding-left: 20px; font-size: 13.2px; color: var(--dx-faint); }
.dx-nav a.here, .dx-nav a[aria-current="page"] { background: var(--dx-accent-wash); color: var(--dx-accent-ink); font-weight: 600; }
.dx-nav a.active { color: var(--dx-text); font-weight: 600; }
.dx-nav .ext::after { content: " ↗"; color: var(--dx-faint); font-size: 11px; }

/* ---- sidebar foot ---- */
.dx-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--dx-line); display: flex; flex-direction: column; gap: 9px; }
.dx-theme { display: flex; gap: 2px; background: var(--dx-sunk); border-radius: 8px; padding: 3px; }
.dx-theme button {
  flex: 1; border: 0; background: none; border-radius: 6px; cursor: pointer;
  font: 600 12px/1 var(--dx-sans); color: var(--dx-faint); padding: 6px 4px;
}
.dx-theme button[aria-pressed="true"] { background: var(--dx-page); color: var(--dx-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dx-foot a { font-size: 12.5px; color: var(--dx-faint); text-decoration: none; }
.dx-foot a:hover { color: var(--dx-accent); }

/* ---- on this page ---- */
.dx-toc { position: sticky; top: 26px; }
.dx-toc p { margin: 0 0 8px; font-family: var(--dx-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dx-faint); }
.dx-toc a {
  display: block; padding: 4px 0 4px 11px; border-left: 2px solid var(--dx-line-soft);
  text-decoration: none; color: var(--dx-faint); font-size: 13px; line-height: 1.45;
}
.dx-toc a:hover { color: var(--dx-text); }
.dx-toc a.here { border-left-color: var(--dx-accent); color: var(--dx-accent-ink); font-weight: 600; }
.dx-toc a.h3 { padding-left: 22px; font-size: 12.5px; }

/* ---- content ---- */
.dx-body { max-width: 50rem; padding: 34px 44px 90px; }
.dx-body > :first-child { margin-top: 0; }
.dx-body h1 { font-size: 34px; line-height: 1.16; letter-spacing: -0.032em; margin: 0 0 14px; text-wrap: balance; }
.dx-body h2 {
  font-size: 23px; line-height: 1.26; letter-spacing: -0.022em; margin: 46px 0 12px;
  padding-top: 14px; border-top: 1px solid var(--dx-line-soft); text-wrap: balance;
}
.dx-body h3 { font-size: 17.5px; line-height: 1.35; letter-spacing: -0.012em; margin: 30px 0 8px; }
.dx-body h4 { font-size: 15px; margin: 22px 0 6px; }
.dx-body p { margin: 0 0 15px; color: var(--dx-dim); }
.dx-body > p:first-of-type, .dx-body .lede { font-size: 17px; line-height: 1.6; color: var(--dx-dim); }
.dx-body a { color: var(--dx-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.dx-body a:hover { border-bottom-color: currentColor; }
.dx-body strong, .dx-body b { color: var(--dx-text); font-weight: 600; }
.dx-body ul, .dx-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--dx-dim); }
.dx-body li { margin: 5px 0; }
.dx-body li::marker { color: var(--dx-faint); }
.dx-body hr { border: 0; border-top: 1px solid var(--dx-line); margin: 34px 0; }
.dx-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--dx-line); }
.dx-body blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--dx-line); color: var(--dx-faint); }

.dx-body .eyebrow {
  font-family: var(--dx-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dx-accent); margin-bottom: 10px;
}
.dx-body .dim, .dx-body .muted, .dx-body .cap, .dx-body .sub { color: var(--dx-faint); }
.dx-body .cap { font-size: 13px; }

/* ---- code ---- */
.dx-body code {
  font-family: var(--dx-mono); font-size: 0.875em;
  background: var(--dx-accent-wash); color: var(--dx-accent-ink);
  padding: 1.5px 5px; border-radius: 4px;
}
.dx-body pre {
  margin: 0 0 18px; background: var(--dx-ink); color: var(--dx-ink-text);
  border-radius: 11px; padding: 16px 18px; overflow-x: auto; position: relative;
}
.dx-body pre code { background: none; color: inherit; padding: 0; border-radius: 0; font-size: 13px; line-height: 1.72; }
.dx-body pre b { color: #ffd166; font-weight: 500; }
.dx-body pre i, .dx-body pre .c { color: var(--dx-ink-dim); font-style: normal; }
.dx-body pre em { color: #8ea6c8; font-style: normal; }
.dx-body pre s { color: #6ddba0; text-decoration: none; }
.dx-body .code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--dx-ink); color: var(--dx-ink-dim); border-radius: 11px 11px 0 0;
  padding: 9px 16px; font-family: var(--dx-mono); font-size: 11.5px;
  border-bottom: 1px solid var(--dx-ink-line); margin-bottom: 0;
}
.dx-body .code-head + pre { border-radius: 0 0 11px 11px; margin-top: 0; }
.dx-copy {
  border: 1px solid var(--dx-ink-line); background: #232935; color: var(--dx-ink-text);
  border-radius: 6px; padding: 4px 10px; font: 600 11.5px/1 var(--dx-sans); cursor: pointer;
}
.dx-copy:hover { background: #2e3645; }
.dx-body pre > .dx-copy { position: absolute; top: 10px; right: 10px; }

/* ---- tables ---- */
.dx-body .table-wrap, .dx-body .tbl { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--dx-line); border-radius: 11px; }
.dx-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.dx-body .table-wrap table, .dx-body .tbl table { border: 0; }
.dx-body th, .dx-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--dx-line-soft); vertical-align: top; }
.dx-body thead th { background: var(--dx-soft); color: var(--dx-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dx-body tbody tr:last-child td { border-bottom: 0; }
.dx-body td code { white-space: nowrap; }
.dx-body .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- callouts ---- */
.dx-body .note, .dx-body .callout, .dx-body .info, .dx-body .warn, .dx-body .danger, .dx-body .ok {
  margin: 0 0 18px; padding: 14px 17px; border-radius: 11px;
  border: 1px solid var(--dx-line); background: var(--dx-soft); color: var(--dx-dim);
}
.dx-body .note > :last-child, .dx-body .callout > :last-child,
.dx-body .warn > :last-child, .dx-body .danger > :last-child, .dx-body .ok > :last-child { margin-bottom: 0; }
.dx-body .note.warn, .dx-body .warn { background: var(--dx-warn-wash); border-color: #efdcae; color: #6b4a00; }
.dx-body .note.danger, .dx-body .danger { background: var(--dx-danger-wash); border-color: #f3c9c5; color: #8f1d17; }
.dx-body .note.ok, .dx-body .ok { background: var(--dx-good-wash); border-color: #bfe3cf; color: #115a3b; }
.dx-body .info { background: var(--dx-accent-wash); border-color: #cfdcf8; color: var(--dx-accent-ink); }
:root[data-dx-theme="dark"] .dx-body .warn, :root[data-dx-theme="dark"] .dx-body .note.warn { border-color: #4a3c16; color: #e8bb50; }
:root[data-dx-theme="dark"] .dx-body .danger, :root[data-dx-theme="dark"] .dx-body .note.danger { border-color: #4d2420; color: #f2857c; }
:root[data-dx-theme="dark"] .dx-body .ok, :root[data-dx-theme="dark"] .dx-body .note.ok { border-color: #1d4634; color: #4ec98a; }
:root[data-dx-theme="dark"] .dx-body .info { border-color: #24375c; color: #8ab4ff; }

/* ---- status pills, used heavily by the reference ---- */
.dx-body .st {
  display: inline-block; font-family: var(--dx-mono); font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; background: var(--dx-sunk); color: var(--dx-dim);
  border: 1px solid var(--dx-line); white-space: nowrap;
}
.dx-body .st-ok { background: var(--dx-good-wash); color: var(--dx-good); border-color: #bfe3cf; }
.dx-body .st-test { background: var(--dx-accent-wash); color: var(--dx-accent-ink); border-color: #cfdcf8; }
.dx-body .st-note { background: var(--dx-warn-wash); color: var(--dx-warn); border-color: #efdcae; }
.dx-body .st-plan { background: var(--dx-sunk); color: var(--dx-faint); }
:root[data-dx-theme="dark"] .dx-body .st-ok { border-color: #1d4634; }
:root[data-dx-theme="dark"] .dx-body .st-test { border-color: #24375c; }
:root[data-dx-theme="dark"] .dx-body .st-note { border-color: #4a3c16; }

/* ---- cards, steps, pairs ---- */
.dx-body .cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); margin: 0 0 18px; }
.dx-body .card, .dx-body .choice-card {
  background: var(--dx-soft); border: 1px solid var(--dx-line); border-radius: 12px; padding: 18px 20px; min-width: 0;
}
.dx-body .card > :last-child, .dx-body .choice-card > :last-child { margin-bottom: 0; }
.dx-body .steps { counter-reset: dxstep; list-style: none; padding: 0; }
.dx-body .steps > li { position: relative; padding-left: 34px; margin: 0 0 16px; }
.dx-body .steps > li::before {
  counter-increment: dxstep; content: counter(dxstep);
  position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--dx-text); color: var(--dx-page);
  font: 700 12px/23px var(--dx-sans); text-align: center;
}
.dx-body .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; margin: 0 0 18px; }
.dx-body .pair > * { min-width: 0; }
.dx-body .list { margin: 0 0 18px; }
.dx-body .tag {
  display: inline-block; font-family: var(--dx-mono); font-size: 11.5px;
  background: var(--dx-sunk); border: 1px solid var(--dx-line); border-radius: 999px;
  padding: 2px 9px; margin: 0 4px 5px 0; color: var(--dx-dim);
}
.dx-body .zoom { cursor: zoom-in; }
.dx-body .ph {
  background: var(--dx-sunk); border: 1px dashed var(--dx-line); border-radius: 10px;
  padding: 26px; text-align: center; color: var(--dx-faint); font-size: 13px; margin: 0 0 18px;
}

/* ---- search highlight ---- */
.dx-hit { background: #ffe9a8; color: #5a4300; border-radius: 3px; }
:root[data-dx-theme="dark"] .dx-hit { background: #5a4300; color: #ffe9a8; }
.dx-hide { display: none !important; }

/* ---- mobile ---- */
.dx-burger, .dx-scrim { display: none; }

@media (max-width: 1180px) {
  .dx { grid-template-columns: var(--dx-side) minmax(0, 1fr); }
  .dx-tocbar { display: none; }
  .dx-body { padding: 34px 36px 80px; }
}
@media (max-width: 860px) {
  .dx { grid-template-columns: minmax(0, 1fr); }
  .dx-side {
    position: sticky; top: 0; z-index: 30; height: auto; max-height: none;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 9px 14px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--dx-line);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dx-side::-webkit-scrollbar { display: none; }
  .dx-brand { flex: 0 0 auto; padding: 0; }
  .dx-brand small { display: none; }
  .dx-search { flex: 0 0 124px; padding: 0; order: 9; }
  .dx-search input { padding: 8px 10px 8px 28px; font-size: 13px; }
  .dx-search svg { left: 9px; }
  .dx-count, .dx-foot a { display: none; }
  .dx-nav { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto; }
  .dx-nav p { display: none; }
  .dx-nav a {
    flex: 0 0 auto; white-space: nowrap; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--dx-line); background: var(--dx-page); font-size: 13.5px;
  }
  .dx-nav a.sub { padding-left: 13px; }
  .dx-foot { margin: 0; padding: 0; border-top: 0; flex: 0 0 auto; }
  .dx-body { padding: 26px 20px 70px; max-width: none; }
  .dx-body h1 { font-size: 27px; }
  .dx-body h2 { font-size: 20px; margin-top: 36px; }
  .dx-body pre { padding: 14px; }
}

/* ---- lightbox + back to top ---- */
.dx-lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(8, 11, 16, .88);
  display: grid; place-items: center; padding: 28px; cursor: zoom-out;
}
.dx-lightbox[hidden] { display: none; }
.dx-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.dx-lightbox-x {
  position: absolute; top: 16px; right: 20px; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff;
  font-size: 21px; line-height: 1; cursor: pointer;
}
.dx-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--dx-line); background: var(--dx-page); color: var(--dx-text);
  font-size: 17px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .16s ease;
  box-shadow: 0 4px 14px rgba(8, 11, 16, .12);
}
.dx-top.show { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dx-top { transition: none; } }