.detail-page {
  --detail-ink: #102421;
  --detail-accent: #08745f;
  --detail-soft: #eef6f2;
}

.detail-page .route-intro {
  padding-bottom: 28px;
}

.detail-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.detail-quick-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #c9d8d2;
  border-radius: 999px;
  color: var(--detail-ink);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.detail-quick-nav a:first-child {
  border-color: var(--detail-ink);
  color: #fff;
  background: var(--detail-ink);
}

.detail-quick-nav a:hover,
.detail-quick-nav a:focus-visible {
  border-color: var(--detail-accent);
  background: var(--detail-soft);
  color: var(--detail-ink);
  transform: translateY(-1px);
}

.detail-page :is(#ward-summary, #station-answer, #station-layouts, #layout-answer-title, #related-layouts, #living, #method) {
  scroll-margin-top: 92px;
}

.station-detail-page :is(.kpis, #ranking, #trend, .ward-section, #living),
.layout-detail-page :is(.kpis, #ranking, #trend, .ward-section, #living),
.ward-detail-page :is(.kpis, #ranking, #trend, .ward-section),
.ward-detail-page #living :is(.ward-ranking, .ward-compare) {
  display: none;
}

.ward-detail-page #living {
  margin-top: 20px;
}

.ward-detail-page #living .section-heading h2 {
  max-width: 20ch;
}

body:has(.detail-page) .mobile-housing-dock {
  display: none;
}

@media (max-width: 760px) {
  .detail-page .route-intro {
    padding-bottom: 18px;
  }

  .detail-quick-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
  }

  .detail-quick-nav a {
    justify-content: flex-start;
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-quick-nav a {
    transition: none;
  }
}