/* VDMSync help center. Tokens: VDMSync design system (light). Pages are generated by scripts/build-help.mjs. */
:root{
  --indigo-200:#C6CDE5;--slate-900:#111827;
  --color-bg-canvas:#F7F8FA;--color-bg-surface:#FFFFFF;--color-bg-surface-sunken:#F1F3F6;--color-bg-hover:#F1F3F6;--color-bg-selected:#EEF0F8;
  --color-border-subtle:#E3E6EB;--color-border-default:#D5D9E0;--color-border-strong:#C4C9D2;--color-border-control:#8D95A2;--color-border-focus:#405189;
  --color-text-primary:#111827;--color-text-secondary:#4B5563;--color-text-tertiary:#6B7280;--color-text-link:#405189;--color-text-on-brand:#FFFFFF;
  --color-brand-solid:#405189;--color-brand-hover:#364574;--color-brand-subtle-bg:#F1F3F9;--color-brand-subtle-border:#C6CDE5;--color-brand-subtle-text:#364574;
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:16px}
body{margin:0;min-height:100vh;background:var(--color-bg-canvas);color:var(--color-text-primary);font-family:var(--font-sans);font-size:13px;line-height:20px;font-feature-settings:'cv11','ss03'}
:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:1px}
::selection{background:var(--indigo-200);color:var(--slate-900)}
button,input{font-family:inherit}
a{color:var(--color-text-link);text-decoration:none}
a:hover{color:var(--color-brand-hover);text-decoration:underline;text-underline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.caps{margin:0;font-size:11px;line-height:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-tertiary)}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-height:48px;padding:8px 24px;background:var(--color-bg-surface);border-bottom:1px solid var(--color-border-subtle)}
.brand{display:flex;align-items:center;gap:12px}
.brand:hover{text-decoration:none}
.brand img{display:block}
.brand span{padding-left:12px;border-left:1px solid var(--color-border-default);font-weight:500;color:var(--color-text-secondary)}
.sections{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto}
.sections a{padding:6px 10px;border-radius:4px;color:var(--color-text-secondary);font-weight:500}
.sections a:hover{background:var(--color-bg-hover);text-decoration:none;color:var(--color-text-primary)}
.sections a[aria-current=page]{background:var(--color-bg-selected);color:var(--color-brand-subtle-text)}
.actions{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--color-border-default);border-radius:4px;background:var(--color-bg-surface);color:var(--color-text-primary);font-size:13px;font-weight:500;cursor:pointer}
.btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary);text-decoration:none}
.btn-primary{border-color:var(--color-brand-solid);background:var(--color-brand-solid);color:var(--color-text-on-brand)}
.btn-primary:hover{border-color:var(--color-brand-hover);background:var(--color-brand-hover);color:var(--color-text-on-brand)}
.btn-lg{height:40px;padding:0 16px}
.btn-md{height:32px}

/* home */
.hero{background:var(--color-bg-surface);border-bottom:1px solid var(--color-border-subtle);padding:56px 24px 48px}
.hero-in{max-width:1152px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hero h1{margin:0;font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.02em}
.lead{margin:0;max-width:640px;font-size:14px;line-height:22px;color:var(--color-text-secondary)}
.search{display:flex;flex-wrap:wrap;gap:8px;max-width:720px;margin-top:8px}
.field{flex:1 1 320px;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 12px;background:var(--color-bg-surface);border:1px solid var(--color-border-control);border-radius:4px;color:var(--color-text-tertiary)}
.field:focus-within{border-color:var(--color-border-focus);box-shadow:0 0 0 1px var(--color-border-focus)}
.field input{flex:1 1 auto;min-width:0;height:36px;border:0;outline:0;background:transparent;font-size:14px;color:var(--color-text-primary)}
.field-sm{flex:none;height:28px;margin:0 4px;padding:0 8px}
.field-sm input{height:24px;font-size:12px}
kbd{padding:1px 6px;border:1px solid var(--color-border-default);border-radius:3px;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--color-text-tertiary);background:var(--color-bg-canvas)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chips>span{font-size:12px;color:var(--color-text-tertiary);margin-right:4px}
.chip{padding:2px 10px;border:1px solid var(--color-border-default);border-radius:999px;font-size:12px;line-height:18px;color:var(--color-text-secondary)}
.chip:hover{background:var(--color-bg-hover);color:var(--color-text-primary);text-decoration:none}
.results{max-width:720px;margin:0;padding:0;list-style:none;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:6px}
.results:empty{display:none}
.results li+li{border-top:1px solid var(--color-border-subtle)}
.results a{display:flex;flex-direction:column;padding:10px 14px;color:inherit}
.results a:hover{background:var(--color-bg-hover);text-decoration:none}
.results b{font-weight:500;color:var(--color-text-primary)}
.results small{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.results .none{padding:10px 14px;color:var(--color-text-tertiary)}
.home{max-width:1200px;margin:0 auto;padding:40px 24px 56px;display:flex;flex-direction:column;gap:40px}
.block{display:flex;flex-direction:column;gap:12px}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.block-head a{font-weight:500}
h2.h{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.011em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:6px;color:inherit}
.card:hover{border-color:var(--color-border-strong);text-decoration:none;color:inherit}
.card .ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--color-brand-subtle-bg);color:var(--color-brand-solid)}
.card b{font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.011em}
.card span{color:var(--color-text-secondary)}
.card small{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.split>.main{flex:999 1 560px;min-width:0}
.split>.side{flex:1 1 340px;min-width:0}
.faq{list-style:none;margin:0;padding:0;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:6px}
.faq li+li{border-top:1px solid var(--color-border-subtle)}
.faq a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:inherit}
.faq a:hover{background:var(--color-bg-hover);text-decoration:none}
.faq svg{flex:none;color:var(--color-text-tertiary)}
.faq .t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.faq b{font-weight:500;color:var(--color-text-primary)}
.faq small{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.flow{padding:16px;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:6px;display:flex;flex-direction:column;gap:6px}
.flow .step{padding:8px 12px;border:1px solid var(--color-border-default);border-radius:4px;display:flex;justify-content:space-between;gap:8px}
.flow .step b{font-weight:500}
.flow .step small{font-size:12px;color:var(--color-text-tertiary)}
.flow .step.cloud{border-color:var(--color-brand-subtle-border);background:var(--color-brand-subtle-bg)}
.flow .step.cloud b{font-weight:600;color:var(--color-brand-subtle-text)}
.flow .step.cloud small{color:var(--color-brand-subtle-text)}
.flow .line{align-self:center;width:1px;height:12px;background:var(--color-border-strong)}
.flow ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px;color:var(--color-text-secondary)}
.flow>a{font-size:12px;font-weight:500}
.help{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:6px}
.help .ico{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--color-bg-surface-sunken);color:var(--color-text-secondary)}
.help>div{flex:1 1 320px;min-width:0}
.help h2{margin:0;font-size:15px;line-height:20px;font-weight:600}
.help p{margin:2px 0 0;color:var(--color-text-secondary)}
.foot{border-top:1px solid var(--color-border-subtle);background:var(--color-bg-surface);padding:16px 24px}
.foot>div{max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;color:var(--color-text-tertiary)}
.foot nav{display:flex;flex-wrap:wrap;gap:16px}

/* guide */
.layout{display:flex;flex-wrap:wrap;align-items:flex-start;max-width:1440px;margin:0 auto}
.chapters{flex:1 1 248px;max-width:100%;padding:20px 12px 32px}
.chapters summary{display:none}
.chapters-in{display:flex;flex-direction:column;gap:16px}
.chapters .group{display:flex;flex-direction:column;gap:2px}
.chapters .group>p{margin:0 0 4px;padding:0 10px}
.chapters a{display:flex;align-items:center;gap:6px;width:100%;padding:6px 10px;border-radius:4px;color:var(--color-text-secondary);font-weight:500}
.chapters a:hover{background:var(--color-bg-hover);color:var(--color-text-primary);text-decoration:none}
.chapters a[aria-current=page]{background:var(--color-bg-selected);color:var(--color-brand-subtle-text)}
.chapters a .n{width:18px;flex:none;font-size:11px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}
.chapters a .l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapters .nohits{margin:0;padding:0 10px;font-size:12px;color:var(--color-text-tertiary)}
.content{flex:999 1 560px;min-width:0;padding:24px 32px 56px;border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle);background:var(--color-bg-surface)}
.doc{max-width:760px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:22px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;line-height:18px;color:var(--color-text-tertiary)}
.crumbs .cur{color:var(--color-text-secondary)}
.title{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.title p{margin:0;font-size:12px;line-height:16px;font-weight:500;color:var(--color-text-tertiary)}
.title h1{margin:0;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.doc h2{margin:16px 0 0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.011em}
.doc p{margin:0;color:var(--color-text-secondary)}
.doc strong{font-weight:600;color:var(--color-text-primary)}
.doc code{padding:1px 5px;border-radius:3px;background:var(--color-bg-surface-sunken);font-family:var(--font-mono);font-size:12px;color:var(--color-text-primary)}
.doc a{text-decoration:underline;text-underline-offset:2px}
.doc ul,.doc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--color-text-secondary)}
.doc li{display:flex;gap:10px}
.doc li>.b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.doc ul>li::before{content:'';flex:none;width:5px;height:5px;margin:9px 4px 0 6px;border-radius:999px;background:var(--color-text-tertiary)}
.doc ol{counter-reset:n}
.doc ol>li{counter-increment:n}
.doc ol>li::before{content:counter(n);flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--color-brand-subtle-bg);color:var(--color-brand-subtle-text);font-size:12px;font-weight:600}
.doc li ul,.doc li ol{gap:4px}
.doc li ul>li::before{margin-top:9px}
.table{overflow-x:auto;border:1px solid var(--color-border-subtle);border-radius:6px}
.table table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:18px}
.table th{padding:7px 10px;font-weight:500;text-align:left;color:var(--color-text-secondary);background:var(--color-bg-surface-sunken);border-bottom:1px solid var(--color-border-default)}
.table td{padding:7px 10px;vertical-align:top;color:var(--color-text-secondary);border-top:1px solid var(--color-border-subtle)}
.table code{padding:0;background:none}
.note{display:flex;gap:10px;padding:10px 14px;border:1px solid var(--color-brand-subtle-border);background:var(--color-brand-subtle-bg);border-radius:6px;font-size:13px;line-height:20px;color:var(--color-brand-subtle-text)}
.note svg{flex:none;margin-top:2px}
.note p,.note strong{color:inherit}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;font-size:13px;line-height:20px}
.pager a{flex:1 1 240px;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--color-border-subtle);border-radius:6px;background:var(--color-bg-surface);text-decoration:none}
.pager a:hover{border-color:var(--color-border-strong);text-decoration:none}
.pager a.next{align-items:flex-end;text-align:right}
.pager small{font-size:12px;color:var(--color-text-tertiary)}
.pager b{font-weight:500;color:var(--color-text-link)}
.toc{flex:1 1 200px;padding:24px 20px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px;position:sticky;top:0}
.toc .caps{margin-bottom:6px}
.toc a{padding:3px 0 3px 10px;border-left:2px solid var(--color-border-subtle);color:var(--color-text-secondary)}
.toc a:hover{border-left-color:var(--color-border-strong);color:var(--color-text-primary);text-decoration:none}
.toc a.on{border-left-color:var(--color-brand-solid);color:var(--color-brand-subtle-text)}

@media (max-width:900px){
  .top{padding:8px 16px}
  .hero{padding:32px 16px}
  .home{padding:24px 16px 40px}
  .chapters{flex-basis:100%;padding:12px 16px 0}
  .chapters summary{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:1px solid var(--color-border-default);border-radius:4px;background:var(--color-bg-surface);font-weight:500;cursor:pointer;list-style:none}
  .chapters summary::-webkit-details-marker{display:none}
  .chapters[open] summary{margin-bottom:12px}
  .content{flex-basis:100%;padding:20px 16px 40px;border:0;border-top:1px solid var(--color-border-subtle);margin-top:12px}
  .toc{display:none}
}
.chapters .linkbtn{padding:0;border:0;background:none;font:inherit;color:var(--color-text-link);cursor:pointer}

/* API page: the intro in the content column, Redoc (own three-column layout) below it, full width */
.content.api{flex-basis:100%;border:0;padding-bottom:16px}
.content.api .doc{max-width:960px}
#redoc{flex-basis:100%;border-top:1px solid var(--color-border-subtle);background:var(--color-bg-surface)}
#redoc .muted{padding:24px 32px;color:var(--color-text-tertiary);font-size:14px}
#redoc .menu-content{position:sticky;top:0}