/* Каркас: верхняя панель, тёмная боковая колонка, рабочая область.
 *
 * Ширина фиксирована снизу (`--min-width`): макет нарисован от 1280 и не сжимается,
 * а поплывшая вёрстка хуже честной заглушки.
 */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 640px;
  min-width: var(--min-width);
  overflow: hidden;
}

/* --- верхняя панель -------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  height: var(--topbar);
  flex: none;
  padding: 0 var(--s8);
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}

.wordmark {
  font: 700 var(--t-16) / 1 var(--mono);
  letter-spacing: var(--track-tight);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

/* Переключатель поездок — капсула с названием и текущим днём. Не страница
 * со списком: смена поездки должна быть переходом между рабочими местами,
 * а не выходом из них. */
.trip-switch {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--control);
  padding: 0 var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--field);
  font: 600 var(--t-14) / 1 var(--sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.trip-switch:hover {
  background: var(--fill);
}
.trip-switch .caret {
  font: 400 var(--t-12) / 1 var(--mono);
  color: var(--ink-4);
}

.search {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 420px;
  height: var(--control);
  padding: 0 var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--field);
  transition: border-color var(--dur-fast) var(--ease);
}
.search:focus-within {
  border-color: var(--accent);
}
.search input {
  width: 100%;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--t-14);
}
.search input::placeholder {
  color: var(--ink-4);
}
.search .glass {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-pill);
}
.search kbd {
  flex: none;
  font: 500 var(--t-12) / 1 var(--mono);
  color: var(--ink-5);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--edge);
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.avatar:hover {
  background: var(--ink);
  color: var(--card);
}

/* --- три зоны -------------------------------------------------------------- */

.body {
  display: grid;
  flex: 1;
  min-height: 0;
}
.body.has-rail {
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}
.body.has-mini {
  grid-template-columns: var(--rail-mini) minmax(0, 1fr);
}
.body.no-rail {
  grid-template-columns: minmax(0, 1fr);
}

.work {
  display: flex;
  min-height: 0;
  min-width: 0;
}

/* --- боковая колонка ------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  background: var(--rail);
  color: var(--rail-ink-2);
  overflow: hidden;
}

.rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s8) var(--s7) var(--s7);
  border-bottom: 1px solid var(--rail-line);
}
/* Без этого `.clip` на названии не работает: минимальная ширина flex-элемента
 * равна min-content его содержимого, и длинное название («Китай · Хунань
 * и Хубэй») распирает колонку, вылезая на карту. Тот же случай, что
 * `minmax(0, 1fr)` у грид-колонок, только в другой раскладке. */
.rail-head > .col {
  min-width: 0;
}
/* Название поездки — своим размером, а не заголовком экрана. В 19 px капсом
 * «Китай · Синьцзян и восток» обрезалось на четвёртом слове («КИТАЙ · СИНЬЦ…»),
 * то есть подпись переставала называть поездку — ровно там, где это её работа.
 * В 13 px обычным регистром имя помещается целиком, как в макете. */
.rail-title {
  font: 600 var(--t-14) / 1.2 var(--sans);
  color: var(--rail-ink);
  /* Переносом, а не многоточием: подпись обязана называть поездку целиком,
     а в 14 px «Китай · Синьцзян и восток» в колонку 232 px одной строкой
     уже не влезает. Многоточие отнимало у неё ровно её работу. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.rail-dates {
  font: 400 var(--t-12) / 1 var(--mono);
  color: var(--rail-ink-3);
}

/* Кнопки внутри тёмной колонки: свой набор состояний, потому что бумажный
 * на тёмном не читается. */
.rail-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s5);
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--rail-ink-3);
  font: 500 var(--t-14) / 1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-btn:hover {
  background: var(--rail-up);
  color: var(--rail-ink);
}
.rail-btn[aria-current="page"] {
  background: var(--rail-up);
  color: var(--rail-ink);
  font-weight: 600;
}

.rail-modes {
  padding: var(--s5) var(--s5) 0;
}

/* Рельс этапов: точка, вертикальная связка, город и даты. Связка не декоративная —
 * она показывает, что этапы идут один за другим, а не лежат списком. */
.rail-stages {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6) var(--s7) var(--s4);
  overflow-y: auto;
  min-height: 0;
}
.rail-stages .caps {
  color: var(--rail-ink-5);
}

.stage-link {
  display: flex;
  gap: var(--s5);
  width: 100%;
  /* Отрицательный отступ слева гасит собственный: заливка открытого этапа
   * должна доходить до края колонки, а текст — стоять там же, где стоял. */
  margin: 0 calc(var(--s4) * -1);
  width: calc(100% + var(--s4) * 2);
  padding: var(--s2) var(--s4) var(--s6);
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.stage-link .track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9px;
  flex: none;
}
.stage-link .dot {
  display: block;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border: 1px solid var(--rail-dot);
  border-radius: var(--r-pill);
  background: transparent;
}
.stage-link .line {
  flex: 1;
  width: 1px;
  background: var(--rail-line-2);
}
.stage-link:last-child .line {
  background: transparent;
}
.stage-link .city {
  font: 400 var(--t-14) / 1.2 var(--sans);
  color: var(--rail-ink-2);
}
.stage-link .when {
  font: 400 var(--t-12) / 1.3 var(--mono);
  color: var(--rail-ink-5);
}
.stage-link:hover .city {
  color: var(--rail-ink);
}
.stage-link.is-past .city {
  color: var(--rail-ink-5);
}
.stage-link.is-past .dot {
  background: var(--rail-dot);
  border-color: var(--rail-dot);
}
.stage-link.is-now .city {
  color: var(--rail-ink);
  font-weight: 600;
}
.stage-link.is-now .dot {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-color: var(--accent);
}
/* Открытый этап — заливкой, тем же языком, что и текущий раздел ниже.
 *
 * Точка занята временем: она отвечает «где я по календарю». Совместить их
 * нельзя — тогда открытый этап не отмечен ничем, и колонка показывает одно,
 * а экран другое: открываешь Урумчи, а подсвечен Канас, потому что сегодня
 * там. Именно это и выглядело как сломанное переключение. */
.stage-link.is-open {
  background: var(--rail-up);
}
.stage-link.is-open .city {
  color: var(--rail-ink);
  font-weight: 600;
}

/* Число записей города — там же, где число раздела ниже, и тем же набором:
 * колонка обязана читаться одним языком сверху донизу. Выравнивается по первой
 * строке, а не по центру: у строки две строки текста, и число, повисшее между
 * ними, читалось бы как относящееся к датам. */
.stage-link .count {
  flex: none;
  margin-top: 2px;
  font: 400 var(--t-12) / 1 var(--mono);
  color: var(--rail-ink-5);
}
.stage-link.is-open .count {
  color: var(--rail-ink-3);
}

.rail-nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s5) var(--s5) var(--s7);
  border-top: 1px solid var(--rail-line);
}
.rail-nav .count {
  font: 400 var(--t-12) / 1 var(--mono);
  color: var(--rail-ink-5);
}

/* --- свёрнутая колонка ----------------------------------------------------- */

.rail.is-mini {
  align-items: center;
  gap: var(--s4);
  padding: var(--s7) 0;
}
.rail.is-mini .mini-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control);
  height: var(--control);
  flex: none;
  border: 0;
  border-radius: var(--r3);
  background: transparent;
  color: var(--rail-ink-4);
  font: 600 var(--t-13) / 1 var(--mono);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail.is-mini .mini-btn:hover {
  background: var(--rail-up);
  color: var(--rail-ink);
}
.rail.is-mini .mini-btn[aria-current="page"] {
  background: var(--rail-up);
  color: var(--rail-ink);
}
.rail.is-mini .mini-btn.is-now {
  background: var(--accent);
  color: var(--card);
}
.rail.is-mini .divider {
  width: 24px;
  height: 1px;
  flex: none;
  background: var(--rail-line);
}
.rail.is-mini .mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  overflow-y: auto;
  min-height: 0;
}
.rail.is-mini .mini-nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s5);
  border-top: 1px solid var(--rail-line);
}

/* Гамбургер: три полоски, потому что иконочного шрифта нет и не будет. */
.burger {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.burger i {
  display: block;
  width: 13px;
  height: 1.5px;
  background: currentColor;
}

/* --- прокручиваемая страница ----------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s8);
  flex: none;
  padding: var(--s9) var(--s9) var(--s7);
  border-bottom: 1px solid var(--line);
}
.page-title {
  font-size: var(--t-27);
}