/* Interactive rail guide (guide.js) — self-contained, livery-aware via --maincolor */
.rg-bar { background: #fafafa; border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 14px; }
.rg-bar .rg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rg-bar input[type=search] { flex: 2 1 220px; padding: 9px 10px; font-size: 1em; border: 1px solid #bbb; border-radius: 4px; }
.rg-bar select { flex: 1 1 150px; padding: 8px; font-size: .95em; border: 1px solid #bbb; border-radius: 4px; background: #fff; }
.rg-reset { background: none; border: none; color: var(--maincolor, #652722); cursor: pointer; font-size: .85em; text-decoration: underline; padding: 4px 6px; }
.rg-count { font-size: .85em; color: #555; margin-left: auto; white-space: nowrap; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rg-chip { border: 1px solid #999; background: #fff; border-radius: 14px; padding: 4px 12px; font-size: .82em; cursor: pointer; user-select: none; }
.rg-chip.on { background: var(--maincolor, #652722); color: var(--maintextcolor, #fff); border-color: var(--maincolor, #652722); }

.rg-wrap { display: flex; gap: 14px; align-items: stretch; }
.rg-side { width: 330px; min-width: 330px; max-height: 640px; overflow-y: auto; }
.rg-mapbox { flex: 1; min-width: 0; height: 640px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
#rgMap { width: 100%; height: 100%; }

.rg-card { background: #fff; border: 1px solid #ddd; border-left: 4px solid var(--maincolor, #652722); border-radius: 4px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; }
.rg-card:hover { background: #f8f4f3; }
.rg-card.active { background: #f3eae8; border-color: var(--maincolor, #652722); }
.rg-card h3 { margin: 0 0 2px; font-size: .95em; }
.rg-card .rg-addr { font-size: .82em; color: #555; }
.rg-card .rg-member { font-size: .8em; color: #333; margin-top: 3px; }
.rg-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.rg-tag { font-size: .68em; padding: 2px 7px; border-radius: 3px; background: #333; color: #fff; }
.rg-tag.rg-region { background: var(--maincolor, #652722); color: var(--maintextcolor, #fff); }
.rg-tag.rg-warn { background: #a86500; }
.rg-nores { color: #666; font-size: .9em; padding: 16px; text-align: center; border: 1px dashed #ccc; border-radius: 4px; }

.rg-popup h3 { margin: 0 0 4px; font-size: 1em; color: var(--maincolor, #652722); }
.rg-popup .rg-tags { margin: 4px 0 6px; }
.rg-popup a { color: var(--maincolor, #652722); }
.rg-popup .rg-member { margin-top: 5px; font-size: .9em; }
.rg-popup .rg-approx { font-size: .75em; color: #a86500; margin-top: 4px; }
.rg-popup .rg-dir { font-size: .85em; margin-top: 6px; }

@media (max-width: 760px) {
  .rg-wrap { flex-direction: column; }
  .rg-side { width: 100%; min-width: 0; max-height: none; order: 2; }
  .rg-mapbox { height: 55vh; min-height: 320px; order: 1; }
}