:root {
  /* Forest-green theme. --accent drives every interactive accent (tabs, rings,
     buttons, links); keep manifest.json `theme_color` and icon.svg in sync with
     it. --track is the empty portion of the progress rings. */
  --accent: #2b7a4b;
  --bg: #f5f7f3;
  --card: #ffffff;
  --text: #2b2b2b;
  --muted: #777;
  --border: #ddd;
  --track: #e4ebe5;
  --error: #c0392b;
  --gold: #e0a106;

  /* category colours — kept in sync with data.json `categories[].color` */
  --c-library: #2563c9;
  --c-park: #2f9e44;
  --c-beach: #e0a106;
  --c-stairway: #b5446e;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  /* No top padding — the sticky .topbar supplies its own so it can pin flush to
     the viewport top. Horizontal/bottom padding stays on the body. */
  padding: 0 1rem 1rem;
  max-width: 1100px;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* "Freeze panes": the title + tabs ride in one sticky bar pinned to the top of
   the page scroll, so the WHOLE top section stays put while the content below
   scrolls. Sticky (not a viewport lock) is the most reliable mobile approach —
   it pins to the visual viewport top on iOS Safari without fighting the dynamic
   toolbar. An opaque background masks content scrolling underneath it. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  padding-top: 1rem;
  padding-bottom: 0.55rem;   /* breathing room + masks content scrolling under */
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

h1 { margin: 0.2rem 0; font-size: 1.6rem; white-space: nowrap; }

.home-link { color: var(--muted); text-decoration: none; }
.home-link:hover { color: var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ---- View switcher (pill segmented control) ---- */
/* Lives inside the sticky .topbar, so it's pinned along with the title. */
.tabbar {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0.6rem auto 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.tabbar button {
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tabbar button:last-child { border-right: none; }
.tabbar button:hover:not(.active) { color: var(--accent); }
.tabbar button.active { background: var(--accent); color: #fff; }

/* ---- View visibility ---- */
.view { display: none; }
.view.active { display: block; }

/* =================== Dashboard =================== */
.overall {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* progress ring rendered with a conic-gradient; --p is the percent 0..100 */
.overall-ring, .cat-ring {
  --p: 0;
  --ring: var(--accent);
  flex: none;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring) calc(var(--p) * 1%), var(--track) 0);
  display: grid;
  place-items: center;
}
.overall-ring { width: 84px; height: 84px; }
.overall-ring::before {
  content: "";
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--card);
}
.overall-text { min-width: 0; }
.overall-pct { font-size: 2rem; font-weight: 700; line-height: 1; }
.overall-sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }

.cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.cat-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.cat-card:hover { border-color: var(--cat); }
.cat-card:active { transform: scale(0.99); }

.cat-ring {
  width: 56px; height: 56px;
  --ring: var(--cat);
  position: relative;
}
.cat-ring::before {
  content: "";
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card);
}
.cat-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.cat-meta { min-width: 0; }
.cat-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cat-dot {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--cat);
  flex: none;
}
.cat-count { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }
.cat-done {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  color: var(--accent);
}

.data-note {
  margin: 1.2rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* =================== List =================== */
.list-controls {
  /* Sticky just below the frozen .topbar (its height is measured into
     --topbar-h by app.js; the fallback covers the first paint). */
  position: sticky;
  top: var(--topbar-h, 6.5rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.8rem;
}

#search {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-size: 16px; /* avoid iOS focus auto-zoom */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.filter-row { display: flex; gap: 0.5rem; }
.filter-row select {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.cat-group-head {
  margin: 1rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.place-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

/* round visited checkbox: hollow ring → filled dot when visited */
.visit-toggle {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 3px solid var(--cat);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.visit-toggle.on { background: var(--cat); }
.visit-toggle.on::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.place-main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.place-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.fav-btn {
  flex: none;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--border);
  padding: 0.2rem;
}
.fav-btn.on { color: var(--gold); }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
}

/* =================== Map =================== */
#map {
  height: calc(100vh - 8rem);
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Map view: lock the whole page to the viewport so the map fills the space below
   the frozen topbar exactly — nothing scrolls or zooms at the page level
   (panning/zooming happens inside Leaflet). `map-active` is toggled on <body> by
   switchView(). Uses dvh so mobile browser chrome is accounted for. */
body.map-active {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}
body.map-active .topbar { position: static; }   /* frozen by flex now, not sticky */
body.map-active .content {
  flex: 1 1 auto;
  min-height: 0;       /* let the flex child shrink so #map can fill exactly */
  display: flex;
}
body.map-active #view-map {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  margin-bottom: 0;
}
body.map-active #map {
  flex: 1 1 auto;
  height: auto;        /* override the calc() height; flex drives the size */
  min-height: 0;
}

/* legend / layer control */
.map-legend {
  position: relative;
  background: var(--card);
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  font-size: 0.82rem;
  line-height: 1.7;
}
/* Collapsible header ("Layers"); collapsed by default. */
.map-legend .legend-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.05rem 0.1rem;
}
.map-legend .legend-toggle svg { flex: none; color: var(--accent); }
.map-legend .legend-toggle .legend-caret { margin-left: auto; transition: transform 0.15s ease; font-size: 1.4rem; line-height: 1; }
.map-legend.open .legend-toggle .legend-caret { transform: rotate(180deg); }
.map-legend .legend-body { margin-top: 0.4rem; }
.map-legend .legend-body[hidden] { display: none; }
.map-legend .legend-title { font-weight: 700; margin-bottom: 0.2rem; }
.map-legend label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.map-legend .swatch {
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  flex: none;
}
.map-legend .locate-btn {
  margin-top: 0.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.map-legend .locate-icon { flex: none; }
.map-legend .locate-btn:hover { border-color: var(--accent); color: var(--accent); }
.map-legend .locate-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* the "you are here" marker */
.me-marker {
  width: 18px; height: 18px;
  position: relative;
}
.me-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background: #1a73e8;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3);
}

/* compact popup buttons inside leaflet popups */
.leaflet-popup-content { margin: 0.6rem 0.7rem; min-width: 180px; }
.popup-name { font-weight: 700; margin-bottom: 0.1rem; }
.popup-sub { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.4rem; }
.popup-actions { display: flex; gap: 0.3rem; }

/* =================== Detail sheet =================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 20, 20, 0.4);
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
  padding: 0.6rem 1.1rem 1.4rem;
  animation: sheet-up 0.2s ease;
}
.sheet[hidden] { display: none; }

@keyframes sheet-up {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
}

.sheet-grip {
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0.2rem auto 0.7rem;
}

.sheet-head { display: flex; align-items: flex-start; gap: 0.6rem; }
.sheet-title { flex: 1; min-width: 0; }
.sheet-title h2 { margin: 0; font-size: 1.2rem; }
.sheet-title .sheet-sub {
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.sheet-title .dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--cat);
  flex: none;
}
.sheet-close {
  flex: none;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.sheet-close:hover { color: var(--text); }

.sheet-photo {
  margin: 0.8rem 0 0;
}
.sheet-photo img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.sheet-photo figcaption {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0.3rem 0.1rem 0;
  line-height: 1.3;
}
.sheet-photo figcaption a { color: var(--muted); }

/* Multi-photo gallery: a horizontal, swipeable strip of high-confidence photos
   (generate-images-commons.mjs). Each card keeps the single-photo look but is
   sized to show ~1.2 photos so it's clearly scrollable. */
.sheet-gallery {
  display: flex;
  gap: 0.6rem;
  margin: 0.8rem 0 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
}
.sheet-gallery .sheet-photo {
  margin: 0;
  flex: 0 0 84%;
  scroll-snap-align: start;
}

.sheet-mini-map {
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0.8rem 0;
  border: 1px solid var(--border);
}

.sheet-visit {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.btn-visit {
  flex: 1;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--cat);
  border-radius: 10px;
  background: transparent;
  color: var(--cat);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.btn-visit.on { background: var(--cat); color: #fff; }

.btn-fav {
  flex: none;
  width: 2.6rem;
  padding: 0.55rem 0;
  font-size: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--border);
  cursor: pointer;
}
.btn-fav.on { color: var(--gold); border-color: var(--gold); }

.rating { display: flex; gap: 0.2rem; margin: 0.5rem 0; }
.rating button {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--border);
  padding: 0;
}
.rating button.on { color: var(--gold); }

.sheet label.field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.6rem 0 0.25rem;
}
.sheet textarea {
  width: 100%;
  min-height: 70px;
  padding: 0.5rem 0.6rem;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.sheet-links { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.sheet-links a {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.sheet-links a:hover { border-color: var(--accent); color: var(--accent); }

.visited-at {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Stairway rating: dashboard gear, config modal, legend submenu ---- */

/* Gear on the Stairways dashboard card (the master tier selector). */
.cat-card { position: relative; }
.cat-gear {
  position: absolute;
  top: 0.45rem; right: 0.45rem;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.cat-gear:hover { color: var(--cat); background: var(--bg); }

/* Config modal — same bottom-sheet treatment as the detail sheet. */
.config-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 20, 20, 0.4);
}
.config-backdrop[hidden] { display: none; }
.config-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
  padding: 0.6rem 1.1rem 1.4rem;
  animation: sheet-up 0.2s ease;
}
.config-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .config-panel { animation: none; } }
.config-grip {
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0.2rem auto 0.7rem;
}
.config-head { display: flex; align-items: center; gap: 0.6rem; }
.config-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.config-close {
  border: 0; background: transparent;
  font-size: 1.1rem; color: var(--muted); cursor: pointer;
  line-height: 1; padding: 0.2rem;
}
.config-intro { margin: 0.4rem 0 0.7rem; font-size: 0.85rem; color: var(--muted); }
.config-tiers { display: flex; flex-direction: column; gap: 0.15rem; }
.tier-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.4rem;
  border-radius: 9px;
  cursor: pointer;
}
.tier-row:hover { background: var(--bg); }
.tier-row input { width: 18px; height: 18px; accent-color: var(--c-stairway); flex: none; }
.tier-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tier-name { font-weight: 600; color: var(--c-stairway); letter-spacing: 0.02em; }
.tier-desc { font-size: 0.8rem; color: var(--muted); }
.tier-count {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  min-width: 2.2rem;
  text-align: center;
}

/* Legend submenu — the per-tier map-visibility checkboxes under "Stairways". */
/* Stairways row: the category checkbox plus its own collapse caret. */
.map-legend .legend-stair-row { display: flex; align-items: center; }
.map-legend .legend-stair-row label { flex: 1; }
.map-legend .stair-disclose {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
}
.map-legend .stair-disclose .legend-caret { transition: transform 0.15s ease; display: inline-block; font-size: 1.4rem; line-height: 1; }
.map-legend .stair-disclose[aria-expanded="true"] .legend-caret { transform: rotate(180deg); }
.map-legend .stair-submenu {
  margin: 0.15rem 0 0.3rem 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--track);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.map-legend .stair-submenu[hidden] { display: none; }
.map-legend .stair-tier {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.map-legend .stair-tier label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.map-legend .stair-tier input { accent-color: var(--c-stairway); flex: none; }
.map-legend .stair-tier .tier-mini {
  color: var(--c-stairway);
  font-size: 0.8rem;
  white-space: nowrap;
}
.map-legend .stair-tier .tier-count {
  font-size: 0.7rem;
  padding: 0 0.35rem;
  min-width: auto;
  background: transparent;
}
.map-legend .stair-tier.excluded { color: var(--muted); }
.map-legend .stair-tier.excluded .tier-mini { color: var(--muted); opacity: 0.6; }
.map-legend .tier-info {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 0.1rem;
  flex: none;
}
/* Floating "why greyed out?" popup — overlays the legend instead of expanding it. */
.map-legend .tier-info-popup {
  position: absolute;
  right: 0.5rem;
  left: 0.5rem;
  z-index: 1200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  padding: 0.5rem 0.6rem 0.55rem;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}
.map-legend .tier-info-popup[hidden] { display: none; }
.map-legend .tier-info-popup p { margin: 0 1rem 0.35rem 0; }
.map-legend .tier-popup-close {
  position: absolute;
  top: 0.2rem; right: 0.3rem;
  border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  font-size: 0.8rem; line-height: 1; padding: 0.1rem;
}
.map-legend .tier-config-link { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Urban Hiker rating line on a stairway's detail sheet (read-only). */
.uh-rating {
  margin: 0.6rem 0 0.2rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
  border-radius: 9px;
}
.uh-word {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-stairway);
}
.uh-rating-text { font-size: 0.8rem; color: var(--muted); }
.uh-rating-src {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.4rem;
  white-space: nowrap;
}

/* Sources tab — rendered from SOURCES.md */
.sources-doc { padding: 1rem 1.1rem; line-height: 1.55; }
.sources-doc h1 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.sources-doc h2 {
  font-size: 1rem;
  margin: 1.1rem 0 0.3rem;
  color: var(--accent);
}
.sources-doc h3 { font-size: 0.92rem; margin: 0.8rem 0 0.2rem; }
.sources-doc p { margin: 0.3rem 0; font-size: 0.9rem; }
.sources-doc ul { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
.sources-doc li { margin: 0.2rem 0; font-size: 0.9rem; }
.sources-doc a { color: var(--accent); }
.sources-doc code {
  background: var(--track);
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  font-size: 0.85em;
}
.sources-doc hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }