/* Route map: bands, chips, cards (house UI: neutral boxes, colour only on text and thin bars) */
.intro { margin: 0 0 8px; }
.bar { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; margin: 10px 0 16px; }
.bar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.bar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 16px; margin-top: 10px; }
.bar-node { border-top: 1px solid var(--rule); padding-top: 8px; }
.bar-node h3 { font-size: 1rem; margin: 0 0 4px; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.pick label { min-width: 7.5em; color: var(--ink-2); }
.pick select { flex: 1 1 12em; min-width: 0; min-height: 44px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 10px; background: var(--field); max-width: 100%; }
.pick[hidden] { display: none; }
.result { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--primary); }

.band { background: var(--surface-strong); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.band.unreached { background: var(--surface); }
.band.unreached .chips, .band.unreached .cards { opacity: .55; }
.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.state { font-size: .92em; color: var(--ink-2); }
.pips { letter-spacing: 1px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.arrow { color: var(--ink-3); }
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; max-width: 100%; min-height: 44px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); cursor: pointer; text-align: left; transition: transform .18s cubic-bezier(.34,1.4,.64,1); }
.chip:hover { transform: translateY(-1px); }
.chip[aria-expanded="true"] { background: var(--surface-strong); border-color: var(--ink-3); }
.chip.live { border-style: dashed; }
.tag { font-size: .85em; color: var(--ink-2); }
.onroute { box-shadow: inset 0 -3px 0 var(--ink); }
.mark { font-size: .85em; font-weight: 700; }
.detail { margin: 10px 0 2px; padding: 8px 0 4px 12px; border-left: 3px solid var(--rule); }
.detail[hidden] { display: none; }
.detail p { margin: 0 0 6px; }
.line { margin: 0 0 6px; max-width: 64ch; }
.dir { color: var(--ink-3); font-style: italic; }
.stop { color: var(--ink-3); font-size: .9em; }
.slot { display: inline-block; padding: 0 6px; border: 1px dashed var(--ink-3); border-radius: 6px; font-size: .9em; color: var(--ink-2); }
.opts { margin: 4px 0 6px; padding-left: 0; list-style: none; }
.opts li { margin: 0 0 4px; }
.variant { margin: 6px 0 10px; }
.variant h4, .card h3 { font-size: 1rem; margin: 0 0 4px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-top: 10px; }
.card { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.card .rule { color: var(--ink-2); font-size: .93em; margin: 0 0 6px; }
.card button.chip { margin-top: 4px; }

.ends { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.end { border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px; background: var(--surface); }
.end .kind { font-size: .85em; font-weight: 700; }
.end .cond { font-size: .9em; color: var(--ink-2); margin: 2px 0 4px; }