/* hero-demo · routes — screen 4 "How routes work" (ADR-0512).
   LAYOUT ONLY. Every button, badge, card, toolbar, alert, empty state and
   toast in the markup is the canonical class from components.css; the rules
   below place them and nothing else. Colour comes from tokens.css only —
   no literal colour anywhere in this file. */

.hd-routes {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
  gap: var(--space-2);
  padding: var(--space-3);
  font-family: var(--sans);
  font-size: var(--font-body);
  color: var(--text);
  box-sizing: border-box;
}
.hd-routes *,
.hd-routes *::before,
.hd-routes *::after { box-sizing: border-box; }

.hd-routes a.btn { text-decoration: none; }

/* ── the control bar: two canonical .toolbar rows that wrap as a pair, so a
   label never has to wrap inside a control (no-wrap law) ── */
.hd-routes__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  flex: 0 0 auto;
}
.hd-routes__bar .toolbar { flex: 0 0 auto; }
.hd-routes__bar .tab-filter { white-space: nowrap; }

/* ── body: list beside map on desktop, map above list on phones ── */
.hd-routes__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-3);
}
.hd-routes__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1 1 44%;
}
.hd-routes__col .section-header { margin: 0 0 var(--space-2); }
.hd-routes__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--space-1);
}
.hd-routes__map {
  flex: 1 1 56%;
  min-width: 0;
  min-height: 0;
  /* its own stacking context: Leaflet gives its panes z-index 400-800, which
     would otherwise paint over the manifest-text sheet below */
  position: relative;
  z-index: 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-container);
  overflow: hidden;
  background: var(--surface-recessed);
}
.hd-routes__map .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: none; }

/* ── one stop ── */
.hd-routes__stop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.hd-routes__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--on-accent);
  border: var(--border-width) solid var(--accent-edge);
  font: 700 var(--font-sm) var(--display);
  line-height: var(--lh-1);
}
.hd-routes__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd-routes__name {
  font: 600 var(--font-body) var(--display);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hd-routes__addr,
.hd-routes__meta { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--lh-tight); }
.hd-routes__times {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hd-routes__t b { font-weight: 600; color: var(--text-secondary); font-size: var(--font-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.hd-routes__leg {
  margin-left: 11px;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: var(--border-width) solid var(--border-strong);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hd-routes__col .alert { margin-bottom: var(--space-2); }

/* ── footer: the free-tool line, the sample-data tell, the door ── */
.hd-routes__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-1);
}
.hd-routes__note { margin: 0; flex: 1 1 200px; font-size: var(--font-sm); color: var(--text-secondary); }
.hd-routes__sample { white-space: nowrap; }

/* ── the manifest-text sheet: sits over the body inside the panel ── */
.hd-routes__sheet {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
}
.hd-routes__sheet[hidden] { display: none; }
.hd-routes__sheetcard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  gap: var(--space-2);
}
.hd-routes__sheetcard .section-header { margin: 0; }
.hd-routes__sheetbtns { display: inline-flex; gap: var(--space-2); flex: 0 0 auto; }
.hd-routes__text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: var(--font-sm);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface-recessed);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-3);
}

/* ── toast: components.css leaves the offsets to the surface ── */
.hd-routes .toast { right: var(--space-4); bottom: var(--space-4); }

/* ── the map's own furniture: a numbered pin and the route line ── */
.hd-routes .hd-routes__pin {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent-edge);
  box-shadow: var(--elevation);
  font: 700 var(--font-sm) var(--display);
  line-height: var(--lh-1);
}
.hd-routes .hd-routes__line { stroke: var(--accent); }
.hd-routes .leaflet-container { height: 100%; width: 100%; background: var(--surface-recessed); font-family: var(--sans); }
.hd-routes .leaflet-control-attribution { background: var(--surface-raised); color: var(--text-secondary); font-size: var(--font-micro); }
.hd-routes .leaflet-control-attribution a { color: var(--text-secondary); }
.hd-routes .leaflet-bar a { background: var(--surface-raised); color: var(--text); border-bottom-color: var(--border); }

@media (max-width: 899px) {
  /* Phones: map on top, list under it, everything scrolling INSIDE the panel.
     The map's height is stated in viewport units, not a percentage of the
     panel: the panel's own height can be flex-derived (indefinite), and a
     percentage flex-basis against an indefinite height collapses the box to
     nothing. max-height on the module gives the internal scroller a definite
     bound in that same case. */
  .hd-routes { padding: var(--space-2); max-height: 100svh; }
  .hd-routes__body { flex-direction: column; }
  .hd-routes__map { order: -1; flex: 45 1 0; min-height: 190px; }
  .hd-routes__col { flex: 55 1 0; min-height: 150px; }
  .hd-routes__col .section-header { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hd-routes__bar { gap: 0 var(--space-3); }
}

@media (prefers-reduced-motion: no-preference) {
  .hd-routes__num { transition: background .15s ease; }
}