/* The stops page: every district and stop as text, on the kit (br.css + app.css). Generated markup from
   tools/lib/site-render.mjs; district colours follow content.js so a card's rule matches its plaza ring. */

.stops-page { background: var(--bg-page); color: var(--text-primary); }

/* The HQ still behind the page (stills.css names the image), the header and body as cards on it */
.stops-page .guide-back { position: fixed; inset: 0; z-index: 0; background-color: var(--bg-page); background-size: cover; background-position: center; }
.stops-page .guide-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-page) 30%, transparent), color-mix(in srgb, var(--bg-page) 60%, transparent)); }
.stops-page :is(.stops-head, .stops-body, footer) { position: relative; z-index: 1; }
.stops-page :is(.stops-head > .wrap, .stops-body) { width: calc(100% - 2rem); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: 0 12px 40px var(--shadow-heavy); }
.stops-page .stops-head > .wrap { padding-bottom: var(--space-lg); }
.stops-page .stops-body { margin-top: var(--space-md); padding-inline: var(--space-lg); }
.stops-page .topbar { border-bottom: 0; }

/* District accents (content.js ORDER colours); the hub shares Perpetuals' green */
.district-hub { --d: #22c55e; }
.district-perps { --d: #22c55e; }
.district-earn { --d: #22d3ee; }
.district-collateral { --d: #facc15; }
.district-partners { --d: #ec4899; }
.district-developers { --d: #3b82f6; }
.district-analytics { --d: #f97316; }
.district-community { --d: #cbd5e1; }
.district-token { --d: #a78bfa; }
.district-chains { --d: #94a3b8; }
.district-raceway { --d: #0fb89c; }
.district-yard { --d: #26fab0; }

.stops-head { padding-block: var(--space-md) 0; }
.stops-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.05; margin: var(--space-2xs) 0 var(--space-sm); max-width: 22ch; text-wrap: balance; }
.stops-head .lede { max-width: var(--measure); color: var(--text-secondary); font-size: 1.1rem; line-height: 1.5; margin: 0; }
.stops-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0; }

.stops-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); }

.stops-jump > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-surface); font-weight: 600; }
.stops-jump > summary::-webkit-details-marker { display: none; }
.stops-jump > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease; }
.stops-jump[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.stops-jump > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.stops-nav ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.stops-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-primary); text-decoration: none; font-size: 0.95rem; background: var(--bg-surface); }
.stops-nav a:hover { border-color: var(--text-secondary); }
.stops-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.stops-main { min-width: 0; }
.district { margin-block: 0 var(--space-xl); scroll-margin-top: var(--space-md); }
.district h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; margin: 0 0 var(--space-2xs); padding-left: 0.85rem; border-left: 5px solid var(--d); }
.district-line { color: var(--text-secondary); max-width: var(--measure); line-height: 1.5; margin: 0 0 var(--space-md); display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.district-drive { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-primary); text-decoration: none; font-size: 0.95rem; background: var(--bg-surface); }
.district-drive:hover { border-color: var(--text-secondary); }
.district-drive:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.district .stop { background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 4px solid var(--d); border-radius: 12px; padding: var(--space-md) var(--space-md) var(--space-sm); margin: 0 0 var(--space-sm); scroll-margin-top: var(--space-md); }
.stop h3 { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin: 0 0 var(--space-2xs); }
.stop p { max-width: var(--measure); font-size: 1.05rem; line-height: 1.55; margin: 0 0 var(--space-xs); }
.stop ul { margin: 0 0 var(--space-xs); padding-left: 1.1rem; max-width: var(--measure); }
.stop li { line-height: 1.5; }
.stop li + li { margin-top: var(--space-3xs); }
.stop p.stop-live { margin: 0 0 var(--space-xs); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; }
.stop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); margin: var(--space-xs) 0 0; max-width: none; }
.stop-doc { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.stop-doc:hover { color: var(--text-secondary); }
.stop-doc:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 1024px) {
  .stops-body { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .stops-nav { position: sticky; top: var(--space-md); }
  .stops-jump > summary { display: none; }
  .stops-nav ul { flex-direction: column; gap: 0.2rem; margin: 0; }
  .stops-nav a[aria-current="true"] { color: var(--text-primary); border-left-color: var(--text-primary); font-weight: 600; }
  .stops-nav a { display: flex; min-height: 0; border: none; border-left: 3px solid transparent; border-radius: 0; padding: 0.4rem 0.75rem; background: none; color: var(--text-secondary); }
  .stops-nav a:hover { color: var(--text-primary); border-left-color: var(--border-color); }
}

@media (min-width: 1100px) { /* one 930 px card with 630 px of prose left a third of every card empty between 1024 and 1279 */
  .district { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-sm); align-items: stretch; }
  .district h2, .district-line { grid-column: 1 / -1; }
  .district:has(> .stop:only-of-type) > .stop { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { .stops-page * { transition: none !important; animation: none !important; } }
/* A stop's guide link reads like its docs link (the kit's link colour fails on the dark surface) */
.stop p.stop-guide { margin: 0 0 var(--space-xs); font-size: 1rem; }
.stop-guide a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.stop-guide a:hover { color: var(--text-secondary); }
.stop-guide a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }