/* «Где был» — вариант 1b макета: полоса с выбором и цифрами, карта во всю
 * ширину, панель поездки поверх карты. Значения — только токены `tokens.css`. */

.vs-root {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Полоса-справка, как у разведки проката: не карточка, а лента. */
.vs-band {
  display: flex;
  align-items: center;
  gap: var(--s7);
  height: 48px;
  flex: none;
  padding: 0 var(--s8);
  background: var(--band);
  border-bottom: 1px solid var(--edge);
}

.vs-seg {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  scrollbar-width: none;
}
.vs-seg-btn {
  flex: none;
  height: 24px;
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  font: 500 var(--t-12) / 1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.vs-seg-btn:hover {
  color: var(--ink);
}
.vs-seg-btn.is-on {
  background: var(--ink);
  color: var(--card);
}

.vs-counts {
  display: flex;
  align-items: baseline;
  gap: var(--s7);
  margin-left: auto;
  flex: none;
}
.vs-count {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 400 var(--t-12) / 1 var(--sans);
  white-space: nowrap;
}
.vs-count b {
  font: 600 var(--t-13) / 1 var(--mono);
  color: var(--ink);
}
.vs-count.is-list {
  cursor: pointer;
}
.vs-count.is-list:hover b,
.vs-count[aria-expanded="true"] b {
  color: var(--accent-hover);
}
.vs-count:disabled {
  cursor: default;
}

.vs-stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Масштаб — слева внизу, как в макете 1b: справа вверху его накрывает
 * панель поездки. Только на этом экране — у соседей панели там нет. */
.vs-stage .map-zoom {
  top: auto;
  right: auto;
  bottom: var(--s6);
  left: var(--s6);
}

.vs-float {
  position: absolute;
  z-index: 5;
  background: var(--card);
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  box-shadow: var(--sh-float);
}

.vs-list {
  top: calc(100% + var(--s3));
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-height: 320px;
  min-width: 180px;
  padding: var(--s5) var(--s6);
  overflow-y: auto;
  color: var(--ink-2);
  font: 400 var(--t-13) / 1.3 var(--sans);
  text-align: left;
}

.vs-layers {
  top: var(--s6);
  left: var(--s6);
  display: flex;
  flex-direction: column;
  padding: var(--hair);
}
.vs-check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 30px;
  padding: 0 var(--s4);
  border-radius: var(--r1);
  font: 500 var(--t-13) / 1 var(--sans);
  cursor: pointer;
}
.vs-check:hover {
  background: var(--fill);
}
.vs-check input {
  accent-color: var(--accent);
}
.vs-check:has(input:disabled) {
  color: var(--ink-5);
  cursor: default;
}
.vs-check:has(input:disabled):hover {
  background: none;
}

.vs-card {
  bottom: var(--s6);
  left: calc(var(--s6) + var(--control) + var(--s5));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 260px;
  padding: var(--s4) var(--s5);
}
.vs-card b {
  font: 600 var(--t-13) / 1.3 var(--sans);
}
.vs-card a {
  font: 500 var(--t-12) / 1 var(--sans);
}

/* Панель поездки — справа поверх карты, на всю высоту сцены. */
.vs-panel {
  top: var(--s6);
  right: var(--s6);
  bottom: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  width: 330px;
  padding: var(--s7) var(--s8);
  overflow-y: auto;
  border-radius: var(--r5);
  box-shadow: var(--sh-panel);
}
.vs-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
}
.vs-panel-head > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s2);
}
.vs-panel-head h3 {
  margin: 0;
  font: 600 var(--t-17) / 1.2 var(--sans);
  letter-spacing: var(--track-tight);
}
.vs-panel-head .mono {
  font-size: var(--t-11);
  color: var(--ink-3);
}
.vs-note {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  background: var(--band);
  font: 400 var(--t-12) / 1.45 var(--sans);
  color: var(--ink-2);
}
.vs-cities {
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--s4)) 0 0;
  padding: 0;
  list-style: none;
}
.vs-cities li {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 29px;
  border-bottom: 1px solid var(--line-soft);
  font: 400 var(--t-13) / 1 var(--sans);
}
.vs-cities .mono {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--ink-4);
}
.vs-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font: 500 var(--t-10) / 1 var(--mono);
  color: var(--ink-2);
}
.vs-cities li:last-child .vs-num {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--card);
}
.vs-open {
  margin-top: auto;
  flex: none;
}

.vs-empty {
  margin: var(--s10);
  color: var(--ink-3);
}