/* Таймлайн олимпиад. Стили одной статьи, а не всего сайта: грузятся
   из самой статьи (блок head), поэтому на остальных страницах их нет.

   Положение всего на оси задаётся двумя переменными, которые шаблон
   проставляет в style: --at (начало, в процентах) и --len (длина).
   Считает их Jinja из дат, потому что считать даты в браузере значило
   бы оставить без таймлайна тех, у кого скрипты выключены.

   Цвета берутся из site.css — отдельной палитры здесь нет: тогда
   тёмная тема пришлось бы описывать второй раз. */

/* Цвета этапов — на корне, а не на самом таймлайне: теми же тремя
   красками помечены этапы в карточках ниже, а они лежат за его
   пределами. Файл всё равно грузит одна страница */
:root {
  --tl-reg: color-mix(in srgb, var(--accent) 22%, transparent);
  --tl-stage: color-mix(in srgb, var(--accent) 55%, transparent);
  --tl-final: var(--accent);
}

.tl {
  --tl-name: 10rem;
  --tl-lane: 1.7rem;
  margin-bottom: 1rem;
}

/* --- Фильтр по типу олимпиады --- */

/* Как и кнопки темы: показываются только когда скрипт поднялся.
   Без скриптов видны все строки, и это правильное умолчание */
.tl__filters { display: none; gap: 0.4rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.tl__filters.is-live { display: flex; }

.chip {
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.chip:hover { color: var(--fg); border-color: var(--accent); }
.chip.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* --- Сетка --- */

/* Ось шире экрана всегда, а не только на телефоне: подписи этапов
   видны без наведения, и места им нужно больше, чем есть. Листать
   таблицу вбок привычнее, чем искать подпись мышкой */
.tl__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.4rem;
}

.tl__grid {
  /* Ширина оси — настоящая, в rem на месяц: проценты растянули бы
     декабрь на пол-экрана при узком окне и слепили бы его при широком */
  width: calc(var(--tl-name) + var(--tl-months) * var(--tl-month));
  display: grid;
  grid-template-columns: var(--tl-name) 1fr;
}

/* Строка раздаёт свои две ячейки родительской сетке: так колонка
   названий выравнивается по всем строкам сразу, а строка остаётся
   элементом — её можно скрыть фильтром и подсветить наведением */
.tl__row { display: contents; }
.tl__row[hidden] { display: none; }

.tl__name {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.7rem 0.25rem 0;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.tl__row:hover .tl__name { color: var(--fg); }
.tl__row--head .tl__name { border-top: 0; }

.tl__track {
  position: relative;
  height: calc(var(--tl-lanes, 1) * var(--tl-lane) + 0.5rem);
  border-top: 1px solid var(--line);
  /* Границы месяцев. Градиентом, а не десятком пустых элементов:
     рисовать сетку — работа фона */
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: var(--tl-month) 100%;
}

.tl__row:hover .tl__track { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Полоски строки, на которую смотрят, чуть ярче — заодно видно, что
   строка кликабельна и ведёт к карточке */
.tl__row:hover .tl__bar { filter: saturate(1.3); }

/* Две полосы: снизу месяцы, сверху год — год рядом с названием
   месяца не влезает и наезжает на соседний */
.tl__track--head {
  height: 2.6rem;
  border-top: 0;
  background-image: none;
}

.tl__month {
  position: absolute;
  left: calc(var(--at) * 1%);
  bottom: 0.15rem;
  padding-left: 0.3rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tl__month b {
  position: absolute;
  left: 0.3rem;
  bottom: 1.1rem;
  color: var(--fg);
  font-weight: 600;
}

/* --- Полоски этапов --- */

.tl__bar {
  position: absolute;
  left: calc(var(--at) * 1%);
  width: calc(var(--len) * 1%);
  top: calc(var(--lane) * var(--tl-lane) + 0.3rem);
  height: calc(var(--tl-lane) - 0.6rem);
  /* Однодневный этап иначе превращается в невидимую щель */
  min-width: 0.45rem;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: var(--tl-stage);
  color: var(--bg);
}

.tl__bar--reg { background: var(--tl-reg); color: var(--fg); }
.tl__bar--stage { background: var(--tl-stage); }
.tl__bar--final { background: var(--tl-final); }

/* Этап начался раньше, чем начинается ось: срезанный край честнее
   ровного — иначе кажется, что регистрация открылась в августе */
.tl__bar.is-cut { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }

/* Подпись этапа. Видна всегда: наводить мышкой на каждую полоску,
   чтобы узнать, что это и когда, — не таймлайн, а викторина.
   Где ей стоять, решает шаблон: внутри широкой полоски, справа от
   узкой, а у правого края оси — слева от неё */
.tl__bar-text {
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.tl__bar-text em { font-style: normal; opacity: 0.72; }
.tl__bar-text em::before { content: " · "; }

.tl__bar--in { overflow: hidden; }
.tl__bar--in .tl__bar-text { padding: 0 0.6rem; overflow: hidden; text-overflow: ellipsis; }

/* Снаружи подпись лежит на фоне страницы, а не на краске полоски,
   поэтому и цвет у неё обычный текстовый */
.tl__bar--after .tl__bar-text,
.tl__bar--before .tl__bar-text {
  position: absolute;
  color: var(--fg);
}

.tl__bar--after .tl__bar-text { left: calc(100% + 0.45rem); }
.tl__bar--before .tl__bar-text { right: calc(100% + 0.45rem); }

/* --- Отметка «сегодня» --- */

.tl__today {
  position: absolute;
  left: calc(var(--at) * 1%);
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--fg) 45%, transparent);
  pointer-events: none;
  z-index: 1;
}

.tl__today--label span {
  position: absolute;
  top: 0;
  left: 0.25rem;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Легенда --- */

.tl__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.tl__legend .tl__key { margin-left: 0.6rem; }
.tl__legend .tl__key:first-child { margin-left: 0; }

.tl__key {
  display: inline-block;
  width: 1.1rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--tl-stage);
  flex: 0 0 auto;
}
.tl__key--reg { background: var(--tl-reg); }
.tl__key--stage { background: var(--tl-stage); }
.tl__key--final { background: var(--tl-final); }

/* --- Карточки олимпиад --- */

.olymp {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  /* Переход по ссылке из таймлайна не должен упирать заголовок
     в край окна */
  scroll-margin-top: 1.5rem;
}
.olymp:first-of-type { border-top: 0; }

.olymp__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.05rem;
  font-weight: 640;
  margin-bottom: 0.4rem;
}

/* Значок этапа в списке стоит по центру строки, а не по её верху */
.olymp__stages { margin: 0.8rem 0 0.6rem; display: grid; gap: 0.3rem; }

.olymp__stages li {
  display: grid;
  grid-template-columns: 1.1rem 9.5rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.olymp__when { align-self: center; }
.olymp__date { color: var(--muted); font-variant-numeric: tabular-nums; }

.olymp__links { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.87rem; }
.olymp__links a { text-decoration: none; }
.olymp__links a:hover { text-decoration: underline; }

@media (max-width: 44rem) {
  .olymp__stages li { grid-template-columns: 1.1rem 1fr; }
  /* Дата уезжает на свою строку, значок остаётся слева от неё */
  .olymp__stages li > span:last-child { grid-column: 2; }
}