/* Visitor guides: how to ride the bus, the tram, the bus terminal, "which bus goes to…",
   the Cajas walking routes and the summary on each line page.
   The short answer comes first (facts strip, line tiles), then steps, then detail.
   Linked per page through page.styles in scripts/build.mjs. Tokens only. */

/* Facts strip: two to four answers under the heading, read at a glance. */
.vg-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--s-9) * 1.5)),1fr)); gap:var(--s-5) var(--col-gap); margin:0 0 var(--s-7); padding:var(--s-5) 0; border-top:2px solid var(--rule-strong); border-bottom:1px solid var(--rule); }
.vg-facts>div { min-width:0; }
.vg-facts dt { margin:0 0 var(--s-1); font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ochre); }
.vg-facts dd { margin:0; font:800 var(--t-title)/var(--lh-title) var(--display); letter-spacing:var(--track-display); color:var(--ink); overflow-wrap:anywhere; }
.vg-facts dd.vg-fact-text { font:700 var(--t-sub)/var(--lh-head) var(--sans); letter-spacing:0; }
.vg-facts dd small { display:block; margin-top:var(--s-1); font:400 var(--t-dense)/var(--lh-dense) var(--sans); letter-spacing:0; color:var(--ink-2); }
.vg-facts dd small a { color:var(--celeste); }

/* On this page: a quiet row of text links, not a wall of buttons. */
.vg-toc { display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s-5); margin:0 0 var(--s-6); font:600 var(--t-dense)/var(--lh-dense) var(--sans); }
.vg-toc span { color:var(--ink-2); font-weight:400; }
.vg-toc a { display:inline-flex; align-items:center; min-height:var(--hit); }

/* Section rhythm inside the reading column. */
.vg-page .g-reading-content>.g-section:first-child { border-top:0; padding-top:0; }
.vg-page .g-section>h2 { margin-bottom:var(--s-3); }
.vg-page .g-section>.vg-intro { color:var(--ink-2); }
.vg-page h3 { font-family:var(--sans); letter-spacing:0; }

/* Numbered steps: square numerals in azul noche. */
.vg-steps { list-style:none; counter-reset:vg-step; margin:var(--s-5) 0; padding:0; display:grid; gap:var(--s-5); max-width:var(--measure); }
.vg-steps>li { counter-increment:vg-step; display:grid; grid-template-columns:var(--hit) minmax(0,1fr); column-gap:var(--s-4); align-items:start; }
.vg-steps>li::before { content:counter(vg-step); grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:var(--hit); height:var(--hit); background:var(--stone-panel); color:var(--ink-inverse); font:800 var(--t-sub)/1 var(--display); }
.vg-steps strong { display:block; padding-top:var(--s-2); font:700 var(--t-body)/var(--lh-head) var(--sans); color:var(--ink); }
.vg-steps p { margin:var(--s-1) 0 0; color:var(--ink-2); }

/* Good to know: one practical warning, set apart from the reading text. */
.vg-tip { margin:var(--s-5) 0; padding:var(--s-4) var(--s-5); max-width:var(--measure); background:var(--lime-sunken); border-left:var(--s-1) solid var(--celeste); }
.vg-tip p { margin:0; }
.vg-tip p+p { margin-top:var(--s-2); }
.vg-tip strong { color:var(--ink); }

/* Three ways in: plan, browse a line, open the map. */
.vg-choices { list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--s-9) * 2)),1fr)); gap:var(--s-4); }
.vg-choices a { display:flex; flex-direction:column; gap:var(--s-1); height:100%; padding:var(--s-4) var(--s-5); background:var(--lime-raised); border:1px solid var(--rule); color:var(--ink); text-decoration:none; }
.vg-choices a:hover { border-color:var(--celeste); }
.vg-choices a:hover strong { color:var(--celeste); text-decoration:underline; }
.vg-choices strong { font:700 var(--t-body)/var(--lh-head) var(--sans); }
.vg-choices span { font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }

/* Text-link chips: popular destinations, named stops on a line. */
.vg-chips { list-style:none; margin:var(--s-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.vg-chips>li>:is(a,span) { display:inline-flex; align-items:center; min-height:var(--hit); padding:0 var(--s-3); border:1px solid var(--rule); background:var(--lime-raised); font:600 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink); text-decoration:none; }
.vg-chips>li>a:hover { border-color:var(--celeste); color:var(--celeste); }
.vg-chips>li>span { min-height:0; padding:var(--s-1) var(--s-3); font-weight:400; }

/* Small, non-interactive line tiles for cards whose whole surface is the link. */
.vg-tiles { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-1); }
.vg-tile { display:inline-flex; align-items:center; justify-content:center; min-width:var(--s-6); height:var(--s-6); padding:0 var(--s-1); border-radius:50%; background:var(--line); color:var(--line-ink); font:900 var(--t-dense)/1 var(--sans); letter-spacing:-.02em; }

/* Cards: destinations, stops, routes. Square, raised, ruled. */
.vg-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--s-9) * 3)),1fr)); gap:var(--s-4); }
.vg-card { display:flex; flex-direction:column; gap:var(--s-3); height:100%; padding:var(--s-5); background:var(--lime-raised); border:1px solid var(--rule); }
.guide-page .vg-card>* { margin:0; }
.vg-card { position:relative; }
.vg-card h3 a::before { content:''; position:absolute; inset:0; }
.vg-card .g-eyebrow { margin:0; font:700 var(--t-label)/var(--lh-dense) var(--sans); color:var(--ochre); }
.vg-card h3 { font:700 var(--t-sub)/var(--lh-head) var(--sans); }
.vg-card h3 a { color:var(--ink); text-decoration:none; }
.vg-card h3 a::after { content:' →'; color:var(--celeste); }
.vg-card:hover { border-color:var(--celeste); }
.vg-card:hover h3 a { color:var(--celeste); text-decoration:underline; }
.vg-card p { font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.vg-card .vg-meta { margin-top:auto; font-weight:600; color:var(--ink); }
.vg-group+.vg-group { margin-top:var(--s-7); }
.vg-group>h2 { margin-bottom:var(--s-4); }

/* Stops on a destination page: one card per stop with its own lines. */
.vg-stops { list-style:none; margin:var(--s-4) 0 0; padding:0; display:grid; gap:var(--s-4); }
.vg-stop { padding:var(--s-5); background:var(--lime-raised); border:1px solid var(--rule); }
.vg-stop h3 { margin:0; font:700 var(--t-sub)/var(--lh-head) var(--sans); }
.vg-stop .vg-where { margin:var(--s-1) 0 var(--s-4); color:var(--ink-2); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.vg-stop .g-line-tiles { margin:0 0 var(--s-3); }
.guide-page .vg-links { margin:0; }
.vg-links { display:flex; flex-wrap:wrap; column-gap:var(--s-5); margin:0; font:600 var(--t-dense)/var(--lh-dense) var(--sans); }
.vg-links a { display:inline-flex; align-items:center; min-height:var(--hit); }

/* Lines list: tile, route name, where it heads. */
.vg-lines { list-style:none; margin:var(--s-4) 0 0; padding:0; border-top:1px solid var(--rule); }
.vg-lines>li { display:grid; grid-template-columns:var(--hit) minmax(0,1fr); column-gap:var(--s-4); align-items:center; padding:var(--s-3) 0; border-bottom:1px solid var(--rule); }
.vg-lines strong { display:block; font:700 var(--t-body)/var(--lh-head) var(--sans); color:var(--ink); }
.vg-lines span { display:block; font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }

/* The short answer on a destination page: every line, as big tiles. */
.vg-answer { margin:0 0 var(--s-7); padding:var(--s-5) 0; border-top:2px solid var(--rule-strong); border-bottom:1px solid var(--rule); }
.vg-answer>p { margin:0 0 var(--s-3); font:700 var(--t-sub)/var(--lh-head) var(--sans); color:var(--ink); }
.vg-answer>p small { display:block; margin-top:var(--s-1); font:400 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }

/* A route drawn as a line of stops: tram stops, Cajas landmarks. */
.vg-route { list-style:none; margin:var(--s-4) 0 0; padding:0; }
.vg-route>li { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:var(--hit); padding:var(--s-2) 0 var(--s-2) var(--s-7); }
.vg-route>li::before { content:''; position:absolute; top:0; bottom:0; left:calc(var(--s-4) - var(--s-1) / 2); width:var(--s-1); background:var(--celeste); }
.vg-route>li::after { content:''; position:absolute; top:calc(50% - var(--s-2)); left:var(--s-2); width:var(--s-4); height:var(--s-4); box-sizing:border-box; border:3px solid var(--celeste); border-radius:50%; background:var(--lime-raised); }
.vg-route>li:first-child::before { top:50%; }
.vg-route>li:last-child::before { bottom:50%; }
.vg-route>li.is-open-start::before { top:0; }
.vg-route>li.is-open-end::before { bottom:0; }
.vg-route>li.is-key::after { top:calc(50% - var(--s-3)); left:var(--s-1); width:var(--s-5); height:var(--s-5); border-color:var(--ink); background:var(--ink); }
.vg-route>li.is-key>b { font-weight:800; }
.vg-route b { font:600 var(--t-body)/var(--lh-head) var(--sans); color:var(--ink); }
.vg-route small { font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.vg-route-segment { margin-top:var(--s-5); }
.vg-route-segment>h3 { margin:0; font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ochre); }
.vg-route-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--col-gap); }
.vg-route-split .vg-route>li:first-child::before { top:0; }
.vg-route-split .vg-route>li:last-child::before { bottom:0; }

/* Plain data tables: fares, bus companies. */
.vg-table { width:100%; max-width:var(--measure); margin:var(--s-4) 0; border-collapse:collapse; font:var(--t-dense)/var(--lh-dense) var(--sans); }
.vg-table th,.vg-table td { padding:var(--s-3) var(--s-3) var(--s-3) 0; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
.vg-table thead th { border-bottom:2px solid var(--rule-strong); font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ochre); }
.vg-table tbody th { font-weight:700; color:var(--ink); }
.vg-table td.vg-price { font:800 var(--t-sub)/var(--lh-head) var(--display); color:var(--ink); white-space:nowrap; text-align:right; padding-right:0; }
.vg-table a { display:inline-flex; align-items:center; min-height:var(--hit); }

/* Terminal destinations: a filter field and region groups. */
.vg-filter { margin:var(--s-4) 0 var(--s-5); max-width:var(--measure); }
.vg-filter label { display:block; margin-bottom:var(--s-2); font:700 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink); }
.vg-filter input { width:100%; min-height:var(--hit); padding:var(--s-2) var(--s-3); border:1px solid var(--ink-3); border-radius:var(--radius-ctl); background:var(--lime-raised); color:var(--ink); font:var(--t-body)/var(--lh-dense) var(--sans); }
.vg-filter p { margin:var(--s-2) 0 0; font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.vg-destinations { list-style:none; margin:var(--s-3) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--s-9) * 2.5)),1fr)); gap:0 var(--col-gap); border-top:1px solid var(--rule); }
.vg-destinations>li { padding:var(--s-3) 0; border-bottom:1px solid var(--rule); }
.vg-destinations b { display:block; font:700 var(--t-body)/var(--lh-head) var(--sans); color:var(--ink); }
.vg-destinations span { display:block; margin-top:var(--s-1); font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.vg-regions { margin-top:var(--s-6); }
.vg-region+.vg-region { margin-top:var(--s-6); }
.vg-page .g-line-tiles+p { margin-top:var(--s-4); }
.vg-table td:last-child a { white-space:nowrap; }
.vg-region>h3 { margin:0; }
.vg-region[hidden],.vg-destinations>li[hidden] { display:none; }

/* Apparatus: tools first, then sources in a quieter list. */
.g-apparatus .vg-tools { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.g-apparatus .vg-tools>li { border-bottom:1px solid var(--rule); }
.g-apparatus .vg-tools a { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:var(--hit); padding:var(--s-2) 0; font:600 var(--t-body)/var(--lh-head) var(--sans); color:var(--ink); text-decoration:none; }
.g-apparatus .vg-tools a::after { content:'→'; color:var(--celeste); }
.g-apparatus .vg-tools a:hover { color:var(--celeste); text-decoration:underline; }
.g-apparatus .vg-sources ol,.g-apparatus .vg-sources ul { margin:0; padding-left:var(--s-5); }
.g-apparatus .vg-sources li { margin-bottom:var(--s-2); }
.g-apparatus .vg-sources h2 { font:700 var(--t-sub)/var(--lh-head) var(--sans); letter-spacing:0; margin:0 0 var(--s-2); }
.vg-sticky { position:sticky; top:var(--s-5); }

/* Line pages: the summary that replaces the run-on introduction. */
.vg-summary { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:var(--s-3) var(--s-5); margin:0 0 var(--s-6); padding:var(--s-4) 0; max-width:var(--measure); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.vg-summary dt { padding-top:var(--s-2); font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ochre); }
.vg-summary dd { margin:0; align-self:center; color:var(--ink); }
.vg-summary .vg-chips,.vg-summary .g-line-tiles { margin:0; }

@media (max-width:850px) {
 .vg-facts { margin-bottom:var(--s-6); }
 .vg-route-split { grid-template-columns:minmax(0,1fr); gap:0; }
 .vg-sticky { position:static; }
 .vg-summary { grid-template-columns:minmax(0,1fr); gap:var(--s-1); }
 .vg-summary dd+dt { margin-top:var(--s-3); }
 .vg-table td.vg-price { font-size:var(--t-body); }
}
@media (max-width:600px) {
 .vg-operators thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .vg-operators tr { display:block; padding:var(--s-3) 0; border-bottom:1px solid var(--rule); }
 .vg-operators :is(th,td) { display:block; width:auto; padding:0; border:0; }
}
.vg-page .vg-subhead { margin:var(--s-6) 0 0; font:700 var(--t-sub)/var(--lh-head) var(--sans); }
.vg-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (min-width:601px) { .vg-operators th[scope=row] { width:40%; } }
@media (max-width:600px) {
 .vg-compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .vg-compare tr { display:flex; flex-wrap:wrap; gap:0 var(--s-4); padding:var(--s-3) 0; border-bottom:1px solid var(--rule); }
 .vg-compare :is(th,td) { padding:0; border:0; }
 .vg-compare th { flex:1 0 100%; }
 .vg-compare td::before { content:attr(data-label) ': '; color:var(--ink-2); }
}