/* Native diagrams inherit the existing VKTIS typography and light/dark palette. */
.vx-page-guide { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6); align-items:center; padding-block:var(--s4); margin-top:var(--s8); border-block:1px solid var(--line); font-size:var(--sm); }
.vx-page-guide>span { font-size:var(--xs); letter-spacing:.08em; color:var(--slate); }
.vx-page-guide a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; border-bottom:2px solid transparent; }
.vx-page-guide a:hover,.vx-page-guide a:focus-visible { border-color:var(--signal); }
.vx-section,.vx-boundary,#service-questions,#next-step { scroll-margin-top:7rem; }
.vx-context { max-width:78ch; color:var(--slate); margin:0 0 var(--s8); }
.vx-image-version { margin-top:var(--s6); border-top:1px solid var(--line); }
.vx-image-version summary { font-weight:700; }
.vx-image-version img { width:100%; height:auto; border:1px solid var(--line); margin-bottom:var(--s4); }
.vx-image-version a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--sm); font-weight:700; }
.vx-image-version code { font:inherit; overflow-wrap:anywhere; }
.vx { --xl:clamp(1.3rem,1.1rem + .5vw,1.6rem); margin:0; padding:var(--s8); border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; overflow-wrap:anywhere; }
.vx *, .vx *::before, .vx *::after { box-sizing:border-box; }
.vx-topline { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); color:var(--slate); font:500 var(--xs)/1.5 var(--font-body); letter-spacing:.06em; border-bottom:1px solid var(--line); padding-bottom:var(--s4); }
/* The caption opens the figure: the label row, then the title. */
.vx figcaption { font:700 var(--xl)/1.3 var(--font-body); padding-bottom:var(--s8); }
.vx-caption-title { display:block; max-width:52ch; padding-top:var(--s6); }
.vx h3 { font:700 var(--lg)/1.3 var(--font-body); letter-spacing:-.02em; margin:var(--s3) 0; }
.vx p { font-size:var(--base); line-height:1.65; color:var(--slate); margin:0; }
.vx-kind { display:block; font:700 var(--xs)/1.5 var(--font-body); letter-spacing:.07em; color:var(--signal); }
.vx-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:var(--s8); padding:0; margin:0; }
.vx-route>li { position:relative; padding:var(--s6); background:var(--paper); border-top:2px solid var(--signal); }
.vx-route>li:not(:last-child)::after { content:"→"; position:absolute; top:var(--s8); right:calc(-1 * var(--s6)); color:var(--signal); font-size:var(--xl); }
.vx-step { display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; font:700 var(--sm)/1 var(--font-body); color:var(--signal); }
.vx-branch-label { display:flex; justify-content:center; padding-block:var(--s8) var(--s5); color:var(--slate); font:700 var(--xs)/1.5 var(--font-body); letter-spacing:.1em; }
.vx-branches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); border-top:1px solid var(--line); }
.vx details { min-width:0; }
.vx summary { cursor:pointer; min-height:48px; padding:var(--s5) var(--s4); font-size:var(--base); }
.vx summary::marker { color:var(--signal); }
.vx summary .vx-kind { margin-block:var(--s2); }
.vx summary strong { font-size:var(--base); }
.vx summary:focus-visible,.vx a:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.vx-branches details>p { padding:0 var(--s4) var(--s5); }
.vx-boundary { display:grid; grid-template-columns:minmax(170px,.75fr) 2fr; gap:var(--s5); border-top:1px solid var(--line); padding-top:var(--s6); margin-top:var(--s6); }
.vx-boundary strong { font-size:var(--base); }
.vx-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.vx-role { display:flex; flex-direction:column; padding:var(--s6); border-top:2px solid var(--line); min-width:0; }
.vx-role+.vx-role { border-left:1px solid var(--line); }
.vx-role-accent { background:var(--paper); border-top-color:var(--signal); }
.vx-role ul { padding-left:var(--s5); color:var(--slate); line-height:1.9; font-size:var(--base); margin-block:var(--s5); }
.vx-role a { display:block; font-size:var(--sm); font-weight:700; text-underline-offset:4px; margin-top:auto; padding-block:var(--s3); }
.vx-shared { display:flex; align-items:center; gap:var(--s3); padding:var(--s5); margin-top:var(--s5); border:1px solid var(--line); background:var(--paper); font-size:var(--base); }
.vx-status-dot { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--signal); }
.vx .vx-note { margin-top:var(--s5); font-size:var(--sm); max-width:92ch; }
.vx-system-route { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1.3fr) 32px minmax(0,1fr); gap:var(--s4); align-items:center; padding-block:var(--s4) var(--s8); }
.vx-sources { display:grid; gap:var(--s3); }
.vx-source { border:1px solid var(--line); padding:var(--s4); font-size:var(--base); background:var(--paper); }
.vx-hub { border:2px solid var(--signal); padding:var(--s6); border-radius:6px; background:var(--paper); }
.vx-arrow { color:var(--signal); font-size:var(--xl); text-align:center; }
.vx-destination { padding:var(--s5); border-left:2px solid var(--line); }
.vx-exception { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vx-exception summary { padding-inline:0; font-weight:700; }
.vx-exception p { padding-bottom:var(--s5); }
.vx-lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8); }
.vx-lane { padding:var(--s6); background:var(--paper); border-top:2px solid var(--line); }
.vx-lane-defined { border-top-color:var(--signal); }
.vx-lane ol { padding:0; margin-top:var(--s6); list-style:none; counter-reset:step; }
.vx-lane li { position:relative; padding:0 0 var(--s6) var(--s10); counter-increment:step; border-left:1px dashed var(--line); margin-left:var(--s3); }
.vx-lane li:last-child { padding-bottom:0; border-color:transparent; }
.vx-lane li::before { content:counter(step); position:absolute; left:-13px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--slate); font:700 var(--xs)/1 var(--font-body); }
.vx-lane-defined li { border-left-style:solid; }
.vx-lane-defined li::before { border-color:var(--signal); color:var(--signal); }
.vx-lane li strong { display:block; font-size:var(--base); padding-bottom:var(--s2); }
@media(max-width:800px) {
  .vx { padding:var(--s6); }
  .vx-role-grid,.vx-route,.vx-branches,.vx-lanes { grid-template-columns:1fr; }
  .vx-role+.vx-role { border-left:0; }
  .vx-route { gap:var(--s8); }
  .vx-route>li:not(:last-child)::after { content:"↓"; top:auto; right:auto; left:var(--s6); bottom:calc(-1 * var(--s8)); line-height:var(--s8); }
  .vx-branches { gap:0; }
  .vx-branches details+details { border-top:1px solid var(--line); }
  .vx-boundary { grid-template-columns:1fr; gap:var(--s3); }
  .vx-system-route { grid-template-columns:1fr; }
  .vx-arrow { transform:rotate(90deg); line-height:1; }
  .vx-hub,.vx-destination { padding:var(--s5); }
  .vx figcaption { font-size:var(--lg); padding-bottom:var(--s6); }
}
@media(max-width:400px) {
  .vx { padding:var(--s4); }
  .vx-role,.vx-lane,.vx-route>li { padding:var(--s5); }
}