/* Verbindungssuche im Panel (v1.10.0), fuer alle drei Designs; Farben kommen aus den Variablen des Designs */
.panel { max-height: calc(100% - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; }
.j-open {
  align-self: flex-start; margin-top: -4px; padding: 2px 0; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--accent); background: none; border: 0; cursor: pointer;
}
.j-open:hover { text-decoration: underline; }
.j-open[aria-expanded="true"] { color: var(--muted); }
.journey { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.journey[hidden] { display: none; }
.j-fields { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 40px; }
.j-swap {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--ink); cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
}
.j-swap:hover { border-color: var(--ink); }
.j-row { display: flex; align-items: flex-end; gap: 10px; }
.j-time { flex: none; }
.j-time input { width: 7.2em; }
.j-now { align-self: flex-end; padding-bottom: 8px; font-size: .8rem; color: var(--muted); }
.j-now[hidden] { display: none; }
.j-go {
  margin-left: auto; font: inherit; font-size: .9rem; font-weight: 700; padding: 8px 18px; cursor: pointer;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink); border-radius: 0;
}
.j-go:hover { opacity: .88; }
.j-note { margin: 0; font-size: .74rem; line-height: 1.35; color: var(--muted); }
.j-msg { margin: 0; font-size: .85rem; color: var(--muted); }
.j-results:empty { display: none; }

.j-title { margin: 2px 0 6px; font-size: .88rem; font-weight: 700; display: flex; flex-direction: column; }
.j-title small { font-weight: 400; font-size: .74rem; color: var(--muted); }
.j-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.j-item { border: 1px solid var(--line); }
.j-item.best { border-color: var(--accent); }
.j-item.open { border-color: var(--ink); }
.j-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 8px 10px; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.j-head:hover { background: rgba(127, 127, 127, .08); }
.j-times { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-dur { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; align-self: center; }
.j-meta { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); }
.j-best {
  font-style: normal; font-weight: 700; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 1px 6px; margin-right: 6px;
}
.j-dly { font-size: .76em; font-weight: 700; margin-left: 2px; vertical-align: 1px; }
.j-lines { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.j-lines .badge { min-width: 34px; padding: 1px 6px; font-size: .78rem; }
.j-sep { color: var(--muted); font-size: .9rem; }

/* Ablauf einer Verbindung: Zeit links, Linie als farbiger Strich */
.legs { list-style: none; margin: 0; padding: 2px 10px 10px; font-size: .84rem; }
.leg { display: grid; grid-template-columns: 3.9em 1fr; gap: 8px; align-items: baseline; }
.leg .lt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.leg .lt time { font-weight: 700; }
.leg.stop { padding: 3px 0; }
.leg.ride > span:last-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  border-left: 4px solid var(--lc); padding: 4px 0 4px 10px; margin-left: -4px;
}
.leg.ride small { flex-basis: 100%; color: var(--muted); font-size: .76rem; }
.leg.ride .badge { min-width: 34px; padding: 1px 6px; font-size: .78rem; }
.leg.walk, .leg.change { color: var(--muted); font-size: .78rem; font-style: italic; padding: 3px 0; }
.j-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.j-actions .chip { font-size: .8rem; }

/* Design 1: runde Ecken */
html[data-design="1"] .j-item { border-radius: 10px; }
html[data-design="1"] .j-head { border-radius: 10px; }
html[data-design="1"] .j-go { border-radius: 8px; }
html[data-design="1"] .j-best { border-radius: 4px; }
html[data-design="1"] .j-item.best:not(.open) { border-color: rgba(242, 194, 48, .55); }
/* Design 3: Schwarz, Akzent gelb mit schwarzer Schrift */
html[data-design="3"] .j-go { color: #000; border-radius: 999px; }
html[data-design="3"] .j-best { color: #000; }
html[data-design="3"] .j-swap { border-color: var(--ink); }

@media (pointer: coarse) {
  .j-fields { padding-right: 50px; }
  .j-swap { width: 40px; height: 40px; }
  .j-go { padding: 10px 20px; }
  .j-open { padding: 6px 0; }
}
@media (max-width: 640px) {
  /* Mit offener Suche darf das Panel mehr Platz nehmen; die Karte bleibt unten sichtbar */
  .panel.j-active { max-height: calc(60vh - env(safe-area-inset-top, 0px)); max-height: calc(60dvh - env(safe-area-inset-top, 0px)); }
  /* Mit offener Suche Platz sparen: Filterknoepfe, Favoriten und Haltestellensuche ausblenden (Schliessen per "Verbindung suchen") */
  .panel.j-active > .chips, .panel.j-active > .fav-list, .panel.j-active > .stopsearch, .panel.j-active > .hint { display: none; }
  .panel.j-active .j-open { margin-top: 0; }
  .journey .stopsearch { flex-direction: row; align-items: center; gap: 10px; }
  .journey .stopsearch > span { width: 2.2em; flex: none; }
  .journey .stopsearch input { flex: 1; min-width: 0; font-size: 16px; }
  .j-time input { flex: none !important; width: 7.5em; }
  .j-row { align-items: center; }
  .j-now { padding-bottom: 0; align-self: center; }
}