/* VB4-MST guide — docs layout on top of the portal chrome (help.css supplies the
   tokens: --fg, --muted, --muted-2, --bg, --bg-2, --card, --line, --accent, --r,
   --sans, --ease). Restyled 2026-09-26 onto the light system. */
.doc{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:0; width:min(var(--container),100% - 2*var(--gutter)); margin-inline:auto; min-height:70vh; }
.doc__side{ padding:40px 24px 40px 0; border-right:1px solid var(--line); position:sticky; top:72px; align-self:start; max-height:calc(100vh - 72px); overflow:auto; }
.doc__kicker{ font-size:13px; font-weight:500; color:var(--muted); 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:var(--r); color:var(--muted); text-decoration:none; font-size:14.5px; line-height:1.35; }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-size:12px; font-weight:600; color:var(--muted-2); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--fg); background:var(--bg-2); }
.toc li.is-current a{ color:var(--fg); background:var(--bg-2); font-weight:500; }
.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:14px; color:var(--muted); }
.doc__support a{ color:var(--fg); text-decoration:none; }
.doc__support a:hover{ color:var(--accent); }
.doc__support span{ font-size:13px; color:var(--muted-2); }

/* Guide top bar: the portal bar with a crumb and a mobile Contents toggle. */
.top__crumb{ margin:0; font-size:14px; color:var(--muted); white-space:nowrap; }
.top__crumb a{ color:var(--muted); }
.top__crumb a:hover{ color:var(--accent); }
.top__crumb span{ color:var(--muted-2); margin:0 8px; }
.top__crumb b{ font-weight:500; color:var(--fg); }
.top__row{ grid-template-columns:auto auto 1fr auto; }
.top__tools{ justify-self:end; }
.nav__toc{ display:none; font:inherit; font-size:13px; font-weight:500; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:999px; padding:0 14px; height:36px; cursor:pointer; }
.nav__toc:hover{ border-color:var(--accent); color:var(--accent); }

.doc__main{ padding:40px clamp(20px,4vw,56px) 60px; min-width:0; }
.article{ max-width:74ch; }
.article h1{ font-size:clamp(2rem,4.2vw,2.75rem); line-height:1.08; margin:0 0 10px; font-weight:600; }
.article h1 + p{ font-size:1.125rem; color:var(--muted); margin-top:0; line-height:1.55; }
.article h2{ font-size:1.5rem; color:var(--fg); margin:44px 0 12px; font-weight:600; line-height:1.15; }
.article h3{ font-size:1.125rem; margin:28px 0 8px; font-weight:600; }
.article p, .article li{ color:var(--muted); font-size:16.5px; line-height:1.6; }
.article p{ margin:0 0 14px; }
.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; background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:.08em .4em; }
.article img{ display:block; max-width:100%; height:auto; border-radius:var(--r); margin:10px 0 0; }
.article figure{ margin:22px 0; }
.article figure img{ background:#fff; border:1px solid var(--line); }
.article figure.photo img{ background:transparent; border:0; }
.article figcaption{ font-size:13px; color:var(--muted-2); 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(--muted); }
.article th{ color:var(--fg); font-weight:600; font-size:14px; }
.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); border-left-width:4px; border-radius:var(--r); padding:14px 18px; margin:18px 0; background:var(--card);
}
.article .danger{ border-left-color:#C0392B; }
.article .warning{ border-left-color:#D97B12; }
.article .caution{ border-left-color:#B8960B; }
.article .notice{ border-left-color:var(--accent); }
.article .note{ border-left-color:var(--muted-2); }
.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-size:13px; font-weight:600; display:block; margin-bottom:4px; color:var(--fg);
}
.article .danger p:first-child::before{ content:"Danger"; color:#C0392B; }
.article .warning p:first-child::before{ content:"Warning"; color:#D97B12; }
.article .caution p:first-child::before{ content:"Caution"; color:#B8960B; }
.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; background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
.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:var(--r); text-decoration:none; color:inherit; transition:border-color .3s var(--ease); }
.pager a:hover{ border-color:var(--accent); color:inherit; }
.pager a:last-child{ text-align:right; }
.pager small{ font-size:13px; color:var(--muted-2); }
.pager b{ font-size:15px; font-weight:600; }
.doc__main .foot{ margin-top:48px; padding:24px 0 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.doc__main .foot a{ color:var(--muted); }
.doc__main .foot a:hover{ color:var(--accent); }

@media (max-width:1080px){ .top__crumb{ display:none; } }
@media (max-width:900px){
  .top__row{ grid-template-columns:auto 1fr auto; height:64px; }
  .top__tools .btn, .top__tools .top__phone{ display:none; }
  .nav__toc{ display:inline-flex; align-items:center; }
  .doc{ grid-template-columns:1fr; width:100%; }
  .doc__side{ display:none; position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); padding:20px var(--gutter) 24px; }
  .doc__side.is-open{ display:block; }
  .doc__main{ padding:28px var(--gutter) 48px; }
  .pager{ grid-template-columns:1fr; }
  .pager a:last-child{ text-align:left; }
}