/* Virtual tabletop guide pages (Roll20, Foundry VTT, Owlbear Rodeo). Uses site.css tokens, so light and dark follow the system. */
.vt{max-width:860px;padding-bottom:24px}
.vt-crumbs{margin:0 0 10px;font-size:14px;color:var(--muted)}
.vt-crumbs a{padding:8px 0;display:inline-block}
.vt .lead{font-size:clamp(17px,2.6vw,20px);line-height:1.55;max-width:62ch;color:var(--text)}
.vt .lead strong{color:var(--cream)}
.vt-cta{margin:20px 0 8px;gap:12px 22px}
.vt-cta .btn{min-height:52px;padding:12px 26px;font-size:17px;text-align:center}
.vt-note{font-size:14px;color:var(--muted);margin:0}
.vt-checked{font-size:14px;color:var(--muted);margin:14px 0 0;max-width:62ch}
.vt h2{margin:48px 0 14px;scroll-margin-top:16px}
.vt h3{margin:0 0 4px}
.vt p,.vt li{line-height:1.6}
.vt p a,.vt li a,.vt td a{overflow-wrap:anywhere}
.vt code{font:600 .92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cream);overflow-wrap:anywhere}

/* numbered steps */
.vt-steps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.vt-steps li{counter-increment:st;position:relative;padding-left:48px}
.vt-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font:600 16px var(--sans);color:var(--gold)}
.vt-steps h3{font-size:18px}
.vt-steps p{margin:0 0 .5em}
.vt-steps p:last-child{margin:0}

/* lists */
.vt-list{margin:0;padding-left:22px;display:grid;gap:10px}
.vt-list li::marker{color:var(--gold)}
.vt-list strong{color:var(--cream)}

/* side-by-side cards */
.vt-two{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-top:14px}
@media(min-width:700px){.vt-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vt-two .card{margin:0!important;padding:18px}
.vt-two h3{font-size:18px;margin-bottom:6px}
.vt-two p{margin:0 0 .6em;font-size:15px}
.vt-two p:last-child{margin:0}
.vt-tag{display:inline-block;margin:0 0 8px;padding:2px 10px;border:1px solid var(--line);border-radius:99px;font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

/* callout */
.vt-callout{margin:18px 0 0;padding:14px 18px;border:1px solid var(--line-soft);border-left:4px solid var(--gold);border-radius:var(--radius);background:var(--ink-800)}
.vt-callout p{margin:0 0 .5em;font-size:15px}
.vt-callout p:last-child{margin:0}
.vt-callout strong{color:var(--cream)}

/* tables */
.vt-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800)}
.vt-tablewrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vt table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.vt caption{caption-side:top;text-align:left;padding:12px 14px 4px;font:700 17px var(--serif);color:var(--cream)}
.vt th,.vt td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line-soft);line-height:1.5}
.vt thead th{font:600 13px var(--sans);letter-spacing:.04em;color:var(--cream);border-top:1px solid var(--line-soft)}
.vt tbody th{font-weight:700;color:var(--cream);white-space:nowrap}

/* gallery strip: four real tokens */
.vt-strip{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vt-strip figure{margin:0;border:1px solid var(--line-soft);border-radius:12px;background:var(--ink-800);padding:10px;text-align:center}
.vt-strip img{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border-radius:8px}
.vt-strip figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:var(--muted)}
@media(max-width:560px){.vt-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vt-strip figure{padding:8px}}

/* FAQ */
.vt-faq{display:grid;gap:10px}
.vt-faq details{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800);padding:0 16px}
.vt-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:10px 0;font:600 16px/1.35 var(--sans);color:var(--cream);list-style:none}
.vt-faq summary::-webkit-details-marker{display:none}
.vt-faq summary::after{content:"+";margin-left:auto;padding-left:12px;font-size:22px;color:var(--gold)}
.vt-faq details[open] summary::after{content:"\2212"}
.vt-faq details p{margin:0 0 16px}

/* other tabletops nav and sources */
.vt-others{margin-top:44px;padding:18px 20px}
.vt-others h2{margin:0 0 8px;font-size:clamp(20px,3.6vw,24px)}
.vt-others ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vt-others a{display:inline-block;padding:10px 0;font-size:16px;line-height:1.4}
.vt-others .vt-more{margin-top:10px;padding-top:6px;border-top:1px solid var(--line-soft)}
.vt-src{margin-top:28px;font-size:13px;line-height:1.55;color:var(--muted)}
.vt-src h2{margin:0 0 6px;font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vt-src ul{margin:0;padding-left:18px}
.vt-src a{overflow-wrap:anywhere}
.vt-end{margin-top:44px;padding:24px}
.vt-end h2{margin:0 0 8px;font-size:clamp(20px,3.6vw,24px)}
@media(max-width:480px){.vt-cta .btn{width:100%}.vt-steps li{padding-left:44px}}