/* VB4-MST guide — docs layout on top of the portal chrome (help.css). */
.doc{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:0; width:min(1180px,100%); margin-inline:auto; min-height:70vh; }
.doc__side{ padding:40px 24px 40px 20px; border-right:1px solid var(--line); position:sticky; top:62px; align-self:start; max-height:calc(100vh - 62px); overflow:auto; }
.doc__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 14px; }
.toc{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{ display:flex; gap:10px; align-items:baseline; padding:8px 10px; border-radius:10px; color:var(--fg-dim); text-decoration:none; font-size:14.5px; line-height:1.35; }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--fg-faint); flex:0 0 auto; }
.toc a:hover{ color:var(--fg); background:rgba(255,255,255,.03); }
.toc li.is-current a{ color:var(--fg); background:rgba(31,143,229,.12); }
.toc li.is-current a::before{ color:var(--accent); }
.doc__support{ margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--fg-dim); }
.doc__support a{ color:var(--fg); text-decoration:none; }
.doc__support span{ font-family:var(--mono); font-size:12px; color:var(--fg-faint); }
.nav__toc{ display:none; font:inherit; font-size:13px; color:var(--fg-dim); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:7px 14px; }

.doc__main{ padding:40px clamp(20px,4vw,56px) 60px; min-width:0; }
.article{ max-width:74ch; }
.article h1{ font-size:clamp(2rem,4.6vw,2.9rem); line-height:1.08; letter-spacing:-.035em; margin:0 0 10px; font-weight:650; }
.article h1 + p{ font-size:1.12rem; color:var(--fg-dim); margin-top:0; }
.article h2{ font-size:1.45rem; letter-spacing:-.025em; color:var(--fg); margin:44px 0 12px; font-weight:640; }
.article h3{ font-size:1.08rem; margin:28px 0 8px; font-weight:600; }
.article p, .article li{ color:var(--fg-dim); font-size:16.5px; }
.article li{ margin:6px 0; }
.article b, .article strong{ color:var(--fg); font-weight:600; }
.article ol{ padding-left:1.5em; }
.article ol > li::marker{ color:var(--accent); font-weight:600; }
.article code{ font-size:.86em; }
.article img{ display:block; max-width:100%; height:auto; border-radius:14px; margin:10px 0 0; }
.article figure{ margin:22px 0; }
.article figure img{ background:#fff; }
.article figure.photo img{ background:transparent; }
.article figcaption{ font-size:13px; color:var(--fg-faint); margin-top:8px; }
.tablewrap{ overflow-x:auto; margin:14px 0 22px; -webkit-overflow-scrolling:touch; }
.article table{ width:100%; min-width:520px; border-collapse:collapse; margin:0; font-size:15px; }
.article th, .article td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--fg-dim); }
.article th{ color:var(--fg); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.article hr{ border:0; border-top:1px solid var(--line); margin:36px 0; }

/* Callouts: pandoc fenced divs → <div class="warning"> etc. */
.article .danger, .article .warning, .article .caution, .article .notice, .article .note{
  border:1px solid var(--line-2); border-left-width:4px; border-radius:12px; padding:14px 18px; margin:18px 0; background:rgba(255,255,255,.025);
}
.article .danger{ border-left-color:#E5484D; }
.article .warning{ border-left-color:#F5A524; }
.article .caution{ border-left-color:#F5D90A; }
.article .notice{ border-left-color:var(--accent); }
.article .note{ border-left-color:var(--fg-faint); }
.article .danger p:first-child::before, .article .warning p:first-child::before, .article .caution p:first-child::before, .article .notice p:first-child::before, .article .note p:first-child::before{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:4px; color:var(--fg);
}
.article .danger p:first-child::before{ content:"Danger"; color:#E5484D; }
.article .warning p:first-child::before{ content:"Warning"; color:#F5A524; }
.article .caution p:first-child::before{ content:"Caution"; color:#F5D90A; }
.article .notice p:first-child::before{ content:"Notice"; color:var(--accent); }
.article .note p:first-child::before{ content:"Note"; }
.article .danger p, .article .warning p, .article .caution p, .article .notice p, .article .note p{ margin:0; }

.article .list{ margin:10px 0 24px; }
.article .card{ padding:18px 20px; }
.article .card b{ margin-bottom:2px; }

.pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:48px; }
.pager a{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; }
.pager a:hover{ border-color:var(--line-2); }
.pager a:last-child{ text-align:right; }
.pager small{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); }
.pager b{ font-size:15px; }
.doc__main .foot{ margin-top:48px; }

@media (max-width:900px){
  .doc{ grid-template-columns:1fr; }
  .doc__side{ display:none; position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); padding:20px 20px 24px; }
  .doc__side.is-open{ display:block; }
  .nav__toc{ display:inline-block; }
  .doc__main{ padding:28px 20px 48px; }
  .pager{ grid-template-columns:1fr; }
  .pager a:last-child{ text-align:left; }
}