/**
 * «Путь пары»: экран записи, которая копится всю жизнь пары.
 *
 * ГЕОМЕТРИЯ И ЦВЕТ СНЯТЫ С КОДА ПРИЛОЖЕНИЯ, а не с его макетов и не по памяти:
 *
 *   lib/journey/shell.dart             карточка, шапка, кольцо, заглушка
 *   lib/journey/sections.dart          неделя, что сделали, к чему тянет, пилюли
 *   lib/journey/portrait_sections.dart жар и полка наград
 *   lib/journey/versus_card.dart       вы двое
 *   lib/journey/month_calendar.dart    календарь месяца
 *   lib/theme/app_tokens.dart          шкала отступов и радиусов
 *   lib/theme/palette.dart             сами цвета
 *
 * ПЕРВАЯ РЕДАКЦИЯ БЫЛА СОБРАНА ПО ДОКУМЕНТУ И ПО НАШИМ ЦВЕТАМ, и владелец
 * поймал ровно это: «цвета вообще другие и всё другое». Две ошибки, обе мои:
 *
 *   рамка карточки была `rgba(255,255,255,.16)`, то есть БЕЛАЯ при шестнадцати
 *   процентах, а в приложении это `outline` при шестнадцати, и outline у нас
 *   тёплый серый #5c514e. Белая рамка на тёплой поверхности читается пыльной и
 *   тянет всю страницу в холод,
 *
 *   заливка карточки была `--c-surface-high`, а в приложении `surfaceContainer`,
 *   то есть `--c-surface`. Одна ступень поверхности вверх, и стопка карточек
 *   перестала лежать НА фоне.
 *
 * НАШИ ТОКЕНЫ ПРИ ЭТОМ ВЕРНЫЕ: `--c-gold` это Ref.gold, `--c-player-1` это
 * Ref.playerBlue, `--c-heat-1..5` это Tiers. Палитра совпадает с приложением
 * значение в значение, ошибка была не в ней, а в том, какой токен я брал.
 *
 * ПРЕФИКС `jr-` НА ВЕСЬ РАЗДЕЛ. Стили ВСЕХ игр грузятся на каждой странице, и
 * общее имя вроде `.card` или `.tile` красило бы чужие экраны.
 */

/* ==========================================================================
   ФОН СТРАНИЦЫ
   ========================================================================== */

/*
 * Картина под записью: одна свеча за кадром, две нити, пересекающиеся однажды,
 * и пыль. Лежит под всем, не ловит нажатий, и полупрозрачна ровно настолько,
 * чтобы страница текста лежала НА ней, а не перед ней (приложение: 0.55).
 */
.jr-fon {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background: url('/next/images/journey/stats_bg.webp') top center / cover no-repeat;
}
.jr-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   ПРИБИТАЯ ШАПКА
   ========================================================================== */

/*
 * СТРЕЛКА НАЗАД ВСЕГДА НА ЭКРАНЕ, и это не удобство, а выход.
 *
 * Страница длиной в шесть экранов, а дверь из неё одна. Нарисуй стрелку внутри
 * списка, и она уедет вверх на первой прокрутке: вернуться можно будет, только
 * пролистав всё обратно. В приложении её держит `AppBar`, прибитый сверху
 * (`record_section.dart`, `circleBackLeading`), и здесь она прибита так же.
 *
 * Полосы каркаса над ней нет: страница стоит в `БЕЗ_ВЕРХА`, иначе «LovePlay
 * Premium» и лицо висели бы вторым заголовком над этим же самым.
 *
 * ФОН У ШАПКИ ЕСТЬ, в отличие от полосы каркаса: под ней проезжают карточки, и
 * без подложки стрелка читалась бы поверх чужих чисел. Размытие снизу мягкой
 * границей, чтобы край не резал страницу линейкой.
 */
.jr-shapka {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: linear-gradient(var(--c-bg) 62%, rgba(10, 6, 6, 0));
  backdrop-filter: blur(6px);
}
.jr-shapka__imya {
  font: 600 var(--t-title-m) var(--f-sans);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   ШАПКА СТРАНИЦЫ
   ========================================================================== */

.jr-kicker {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-muted);
}

/*
 * Заголовок с ОДНИМ СЛОВОМ ЗОЛОТОМ И КУРСИВОМ. Это подпись страницы в
 * приложении, и слово там ставит САМ ПЕРЕВОД, а не вёрстка: языки, которые
 * выносят существительное вперёд, иначе не собираются.
 */
.jr-title {
  font: 400 var(--t-display-s) var(--f-serif);
  color: var(--c-text);
  margin: var(--s-2) 0 0;
}
.jr-title em {
  color: var(--c-gold);
  font-style: italic;
}
.jr-blurb {
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-2) 0 0;
}

/* ==========================================================================
   ПИЛЮЛИ ОТРЕЗКА
   ========================================================================== */

/*
 * Неделя, месяц, всё время. Сорок четыре точки высоты: меньше большой палец не
 * находит, а их тут три подряд на телефоне в 390.
 *
 * ШИРОКИЙ ПЕРВЫМ, дальше сужается. Порядок написан руками, а не взят из набора:
 * набор перечислен так, как его читает код, а это то, как его читает палец.
 */
.jr-pills {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-4);
}
.jr-pill {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-muted);
  font: 400 var(--t-body-s) var(--f-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.jr-pill.on {
  background: rgba(212, 175, 55, .14);
  border-color: rgba(212, 175, 55, .55);
  color: var(--c-gold);
}

/* ==========================================================================
   КАРТОЧКА БЛОКА
   ========================================================================== */

/*
 * Та самая карточка: радиус 24, отступ 20, волосяная рамка. Страница читается
 * стопкой карточек именно поэтому. Между блоками двенадцать, а между карточкой
 * пары и кольцом шестнадцать: поля соседей схлопываются в большее из двух, и
 * это ровно то, что делает приложение своими `space3` и `space4`.
 */
.jr-card {
  border-radius: var(--r-xl);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  margin-bottom: var(--s-3);
}

/* Карточка, которую подсвечивают: кольцо. */
.jr-card--gold {
  margin-top: var(--s-4);
  border-color: rgba(212, 175, 55, .28);
  background: linear-gradient(135deg, rgba(212, 175, 55, .10), var(--c-surface));
}

/* Вечер для памяти: золотая рамка и розовый отсвет. */
.jr-card--moment {
  border-color: rgba(212, 175, 55, .24);
  background: linear-gradient(135deg, rgba(244, 63, 94, .10), var(--c-surface));
}

/* Блок, которому пока нечем наполниться: рамка тише обычной. */
.jr-card--pusto { border-color: rgba(92, 81, 78, .10); }

/* Карточка пары: поле 16, а не 20, как и в приложении. */
.jr-card--para { padding: var(--s-4); }

/* Заголовок внутри карточки: имя слева, мелкое число справа, подпись под. */
.jr-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.jr-head__name {
  flex: 1;
  min-width: 0;
  font: 600 var(--t-title-s) var(--f-sans);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-head__name--tikho { color: var(--c-muted); }
.jr-head__count {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-muted);
  flex: none;
}
.jr-head__note {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-1) 0 0;
}

/*
 * ЗАГЛУШКА НЕСЁТ ФРАЗУ, А НЕ НОЛЬ. Ни числа, ни нуля: заголовок и предложение
 * во втором лице о том, что должно случиться, чтобы блок приехал.
 */
.jr-empty {
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
  line-height: 1.5;
  margin: var(--s-2) 0 0;
}

/* ==========================================================================
   1. ПАРА И УРОВЕНЬ
   ========================================================================== */

.jr-para {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.jr-para__telo { flex: 1; min-width: 0; }
.jr-para__imena {
  font: 600 var(--t-title-m) var(--f-sans);
  color: var(--c-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-para__amp { color: var(--c-text); }
.jr-para__s {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: 2px 0 0;
}

/* Лица 44, каждое в кольце своего места, первый поверх второго. */
.jr-faces .faces img { width: 44px; height: 44px; margin-left: 0; }
.jr-faces .faces > img:first-child {
  border-color: rgba(92, 181, 255, .9);
}
.jr-faces .faces > img + img {
  border-color: rgba(255, 120, 150, .9);
  margin-left: -16px;
}

/*
 * Уровень: золотая пилюля с числом, под ней дорожка 76 на 7 с зажжённой
 * заливкой. Полоса Material, которую это заменило, была серой линией с
 * полоской и читалась как загрузка файла.
 */
.jr-urovenj {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}
.jr-urovenj__znak {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(212, 175, 55, .12);
  border: 1px solid rgba(212, 175, 55, .35);
  color: var(--c-gold);
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
}
.jr-urovenj__putj {
  display: block;
  width: 76px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(250, 250, 250, .07);
  border: 1px solid rgba(250, 250, 250, .10);
}
/* Минимальный язычок, чтобы пара в трёх процентах от уровня видела, где начало. */
.jr-urovenj__putj i {
  display: block;
  height: 5px;
  min-width: 9px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-gold-light), var(--c-gold));
  box-shadow: 0 0 7px -2px rgba(212, 175, 55, .55);
}

/* ==========================================================================
   2. КОЛЬЦО И ТРИ ПЛИТКИ
   ========================================================================== */

.jr-hero {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.jr-hero__ring {
  width: 104px;
  height: 104px;
  flex: none;
  position: relative;
}
.jr-hero__ring canvas { width: 104px; height: 104px; display: block; }
.jr-hero__mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.jr-hero__num {
  font: 400 var(--t-display-s) var(--f-serif);
  color: var(--c-text);
  line-height: 1;
}
.jr-hero__unit {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-muted);
}
.jr-hero__body { flex: 1; min-width: 0; }
.jr-hero__title {
  font: 500 var(--t-headline-s) var(--f-serif);
  color: var(--c-text);
  margin: 0;
}
.jr-hero__note {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-2) 0 0;
}

/* Три плитки под кольцом. Радиус 16, заливка четыре процента, рамка двенадцать. */
.jr-hero__tiles {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.jr-tile {
  flex: 1;
  min-width: 0;
  padding: var(--s-3) 10px;
  border-radius: var(--r-md);
  background: rgba(250, 250, 250, .04);
  border: 1px solid rgba(92, 81, 78, .12);
}
.jr-tile__num {
  font: 600 var(--t-title-m) var(--f-sans);
  color: var(--c-text);
  /*
   * Число ужимается, а не теряет хвост: «14 ч 47...» это не время, а треть
   * карточки в 318 точек это 96. Замечание оттуда же, из приложения.
   */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.jr-tile__what {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  line-height: 1.25;
  margin-top: 2px;
}

/* ==========================================================================
   3. ФОРМА НЕДЕЛИ
   ========================================================================== */

.jr-week {
  display: flex;
  align-items: flex-end;
  height: 108px;
  margin-top: var(--s-4);
}
.jr-week__col {
  flex: 1;
  min-width: 0;
  padding: 0 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.jr-week__num {
  font: 600 var(--t-label-s) var(--f-mono);
  color: var(--c-muted);
  min-height: 14px;
  margin-bottom: 4px;
}
/*
 * Вечер, на котором ничего не было, ДЕРЖИТ ВОЛОСОК в пять точек: неделя тогда
 * читается семью вечерами, один из которых пустой, а не шестью вечерами.
 */
.jr-week__bar {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: rgba(250, 250, 250, .16);
}
.jr-week__day {
  font: 600 var(--t-label-s) var(--f-mono);
  color: var(--c-muted);
  margin-top: var(--s-2);
}
.jr-week__col.on .jr-week__bar { background: var(--c-gold); }
.jr-week__col.on .jr-week__num,
.jr-week__col.on .jr-week__day { color: var(--c-gold); }

/* ==========================================================================
   4. ЧТО СДЕЛАЛИ
   ========================================================================== */

/*
 * ОДИН ФАКТ В СТРОКУ, число слева, фраза справа.
 *
 * Была сетка из шести половинок, и арифметика объясняет, почему она не могла
 * работать: на половину карточки остаётся четырнадцать знаков, а в четырнадцать
 * знаков ни один из десяти языков не умещает то, что число значит. Строка это
 * вся ширина карточки, и подпись на любом языке встаёт в одну.
 *
 * Колонка числа ФИКСИРОВАНА в 68, а не меряется: меряемая означала бы, что
 * фразы начинаются в разном месте в каждом блоке, который пара откроет.
 */
.jr-did { margin-top: var(--s-4); }
.jr-did__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
}
.jr-did__row:first-child { border-top: 0; padding-top: 0; }
.jr-did__num {
  flex: none;
  width: 68px;
  font: 500 var(--t-headline-s) var(--f-serif);
  color: var(--c-gold);
}
.jr-did__body { flex: 1; min-width: 0; }
.jr-did__what {
  display: block;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}
/*
 * Название игры ПОД фразой и тише. На одной строке с ней оно не помещалось:
 * «Cinque per un desiderio» это 23 знака из 36, и половина строк своих игр
 * переносилась. У общего счётчика этой строки нет вовсе: он говорит, где
 * считался, своими словами.
 */
.jr-did__where {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-faint);
  margin-top: 2px;
}

/* ==========================================================================
   5. КАК ГОРЯЧО
   ========================================================================== */

/*
 * Полоса рисуется одним рядом долей: в приложении три коробки в ряду на вебе
 * просто не рисовались, и пара с ровной смесью видела треть полосы.
 */
.jr-heat__bar {
  display: flex;
  height: 9px;
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--s-4);
}
.jr-heat__bar i { display: block; }
.jr-heat__rows { margin-top: var(--s-4); }
.jr-heat__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
}
.jr-heat__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.jr-heat__body { flex: 1; min-width: 0; }
.jr-heat__name {
  display: block;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}
.jr-heat__note {
  display: block;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}
.jr-heat__right {
  flex: none;
  text-align: right;
}
.jr-heat__pc {
  display: block;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}
.jr-heat__n {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-muted);
}

/* ==========================================================================
   6. ВЫ ДВОЕ
   ========================================================================== */

.jr-vs { margin-top: var(--s-4); }
.jr-vs__i { color: var(--c-text); }
/*
 * ТРИ КОЛОНКИ, И КРАЙНИЕ УМЕЮТ СЖИМАТЬСЯ. `minmax(0, auto)`, а не просто
 * `auto`: клетка сетки по умолчанию не уже своего содержимого, а по краям здесь
 * стоят НАЗВАНИЯ СТУПЕНЕЙ, а не числа. Два «Sans retenue» это по девяносто
 * точек каждое, и на телефоне в 320 такая строка распирала ряд раньше, чем
 * подпись посередине успевала обрезаться. Поймано в приложении при замере
 * ширины под эти же пять строк.
 */
.jr-vs__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.jr-vs__row:last-child { margin-bottom: 0; }
.jr-vs__moy,
.jr-vs__ikh {
  font: 600 var(--t-title-s) var(--f-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jr-vs__moy { color: var(--c-player-1); }
.jr-vs__ikh { color: var(--c-player-2); text-align: right; }
.jr-vs__imya {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * Полоса встречается там, где встречаются два числа. Каждая половина гаснет к
 * своему краю и полна у стыка, как и нарисовано в приложении.
 */
.jr-vs__bar {
  grid-column: 1 / -1;
  display: flex;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(250, 250, 250, .07);
}
.jr-vs__bar i { display: block; height: 100%; }
.jr-vs__moyKray { background: linear-gradient(90deg, rgba(92, 181, 255, 0), var(--c-player-1)); }
.jr-vs__ikhKray { background: linear-gradient(90deg, var(--c-player-2), rgba(255, 120, 150, 0)); }

/* ==========================================================================
   7. ВЕЧЕР, КОТОРЫЙ СТОИТ ПОМНИТЬ
   ========================================================================== */

.jr-moment__big {
  font: 500 var(--t-headline-s) var(--f-serif);
  color: var(--c-text);
  margin: var(--s-3) 0 0;
}
.jr-moment__what {
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
  margin: var(--s-1) 0 var(--s-2);
}
.jr-moment__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-top: var(--s-3);
}
.jr-moment__line span {
  flex: 1;
  min-width: 0;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}
.jr-moment__line b {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-text);
  text-align: right;
}

/* ==========================================================================
   8. К ЧЕМУ ТЯНЕТ
   ========================================================================== */

.jr-draws { margin-top: var(--s-4); }
.jr-draws__row { margin-bottom: var(--s-3); }
.jr-draws__top {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}
.jr-draws__top > span:first-child { flex: 1; min-width: 0; }
.jr-draws__pc { color: var(--c-muted); flex: none; }
.jr-draws__bar {
  display: block;
  height: 6px;
  margin-top: var(--s-2);
  border-radius: 4px;
  background: rgba(250, 250, 250, .10);
  overflow: hidden;
}
.jr-draws__bar i { display: block; height: 100%; background: var(--c-gold); }

/* ==========================================================================
   9. КАЛЕНДАРЬ МЕСЯЦА
   ========================================================================== */

.jr-cal__shapka {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.jr-cal__imya { flex: 1; min-width: 0; }
.jr-cal__strelka {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(92, 81, 78, .20);
  background: rgba(250, 250, 250, .06);
  color: var(--c-text);
  font: 400 20px/1 var(--f-sans);
  cursor: pointer;
}
.jr-cal__strelka[disabled] {
  border-color: rgba(92, 81, 78, .08);
  background: rgba(250, 250, 250, .02);
  color: rgba(250, 250, 250, .25);
  cursor: default;
}
.jr-cal__dni,
.jr-cal__setka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.jr-cal__dni {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
  text-align: center;
  font: 600 var(--t-label-s) var(--f-mono);
  color: var(--c-muted);
}
.jr-cal__pusto { aspect-ratio: 1; }
/*
 * КЛЕТКА КРАСИТСЯ ТЕМ, ЧЕМ БЫЛ ВЕЧЕР, а не тем, сколько он шёл. Цвет ОДИН,
 * трёх сил: три разных тона говорили бы, что мягкий вечер и дикий это разные
 * роды вещей, а это три ступени одной.
 */
.jr-cal__denj {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid rgba(92, 81, 78, .10);
  background: rgba(250, 250, 250, .04);
  font: 600 var(--t-label-s) var(--f-mono);
  color: rgba(161, 161, 170, .6);
}
.jr-cal__denj.on {
  background: rgba(212, 175, 55, var(--sila));
  border-color: rgba(212, 175, 55, .55);
  color: var(--c-bg);
}
.jr-cal__denj--vperedi { opacity: .25; }
.jr-cal__klyuch {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.jr-cal__metka {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 var(--t-label-s) var(--f-mono);
  color: var(--c-muted);
}
.jr-cal__metka i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: block;
}
.jr-cal__nota {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-2) 0 0;
}

/* ==========================================================================
   10. ПОЛКА НАГРАД
   ========================================================================== */

/*
 * ОДНА КОЛОНКА, А НЕ ДВЕ. Названия здесь написаны так же, как всё остальное на
 * странице, человеческой фразой, и половинная карточка резала каждую из них
 * посреди слова.
 */
.jr-shelf { margin-top: var(--s-4); }
/*
 * ЗНАЧОК ПО СЕРЕДИНЕ СТРОКИ, А НЕ ПО ЕЁ ВЕРХУ.
 *
 * В приложении ряд полки выровнен по верху, и там это незаметно: значок и имя
 * почти одной высоты. У нас под именем идёт вторая строка с названием лестницы,
 * ряд становится вдвое выше, и значок повисает над текстом. Владелец: «картинки
 * наград нужно выровнять относительно текстов, а то они сейчас вверх от текста».
 */
.jr-shelf__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-top: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--stupenj) 28%, transparent);
}
.jr-shelf__znak {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stupenj) 22%, transparent);
  border: 1px solid var(--stupenj);
}
.jr-shelf__telo { flex: 1; min-width: 0; }
.jr-shelf__imya {
  display: block;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-shelf__nota {
  display: block;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin-top: 2px;
}

/* ==========================================================================
   ЗНАЧОК ЛЕСТНИЦЫ
   ========================================================================== */

/*
 * ВОСЕМНАДЦАТЬ КАРТИНОК ИЗ ПРИЛОЖЕНИЯ, КРАШЕННЫЕ МАСКОЙ.
 *
 * Файлы белые с прозрачным фоном (`assets/art/tracks`), и цвет ступени даётся
 * фоном сквозь маску, а не пятью копиями файла: пять ступеней на восемнадцать
 * лестниц это девяносто картинок ради того, что маска делает даром. Так же
 * рассуждает `TrackGlyph` в приложении.
 *
 * `-webkit-mask` рядом со стандартным: без него значки исчезают в Safari, и
 * исчезают МОЛЧА, оставляя пустой квадрат там, где была награда.
 */
.jr-znachok {
  display: block;
  flex: none;
  width: var(--bok);
  height: var(--bok);
  background: var(--tsvet);
  -webkit-mask: var(--znak) center / contain no-repeat;
  mask: var(--znak) center / contain no-repeat;
}
/*
 * Лестница, до которой не дошли, приглушена, а не перекрашена в шестой тон:
 * отсутствие цвета и есть «сюда ещё не поднимались».
 */
.jr-znachok--tikho { opacity: .75; }

/* ==========================================================================
   СТЕНА НАГРАД
   ========================================================================== */

/*
 * ВОСЕМНАДЦАТЬ ПЛИТОК ПО ДВЕ В РЯД. На 390 точках это плитка в 165: ровно
 * столько, сколько нужно значку, имени в две строки, полосе и одной строке
 * чисел. Девяносто строк вместо этого были бы стеной, которую никто не листает.
 */
/*
 * `minmax(0, 1fr)`, А НЕ `1fr`: у клетки сетки минимальная ширина по умолчанию
 * равна ширине содержимого, и строка чисел под полосой распирала колонку. На
 * снимке это видно сразу: правый столбец уезжал за край экрана.
 */
.jr-stena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.jr-plitka {
  display: flex;
  flex-direction: column;
  min-height: 138px;
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  /* Нетронутая лестница: рамка тише обычной, без цвета ступени. */
  border: 1px solid rgba(92, 81, 78, .10);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.jr-plitka--vzyata { border-color: color-mix(in srgb, var(--stupenj) 28%, transparent); }
.jr-plitka--vsya { border-color: color-mix(in srgb, var(--stupenj) 55%, transparent); }
.jr-plitka__verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
/*
 * Свечение это ступень КАК СВЕТ, а не ещё одна цветная линия: на двадцати шести
 * точках тонкий значок сам по себе цвет не держит, а светящаяся плитка читается
 * раньше, чем её название.
 */
.jr-plitka--vzyata .jr-znachok {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--stupenj) 34%, transparent));
}
.jr-tochki { display: flex; gap: 3px; }
.jr-tochki__i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(161, 161, 170, .25);
}
.jr-plitka__imya {
  display: block;
  margin-top: var(--s-3);
  font: 600 var(--t-title-s) var(--f-sans);
  color: var(--c-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jr-plitka--vzyata .jr-plitka__imya { color: var(--c-text); }
/* Полоса прижата к низу: у плиток разной длины имени низ всё равно один. */
.jr-plitka__polosa {
  display: block;
  height: 4px;
  margin-top: auto;
  border-radius: 2px;
  background: rgba(161, 161, 170, .14);
  overflow: hidden;
}
.jr-plitka__polosa i { display: block; height: 100%; border-radius: 2px; }
.jr-plitka__chislo {
  display: block;
  margin-top: var(--s-2);
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jr-plitka--vsya .jr-plitka__chislo { color: var(--stupenj); }
.jr-stena__nota {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-5) 0 var(--s-8);
}

/* ==========================================================================
   СТРАНИЦА ОДНОЙ ИГРЫ И СТЕНА СТУПЕНЕЙ
   ========================================================================== */

/* Плитки числа на странице игры. */
.jr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.jr-cell {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(250, 250, 250, .04);
  border: 1px solid rgba(92, 81, 78, .12);
}
.jr-cell__num {
  font: 400 var(--t-display-s) var(--f-serif);
  color: var(--c-text);
  line-height: 1;
}
.jr-cell__what {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  line-height: 1.3;
  margin-top: var(--s-2);
}

/*
 * ТРИ ОТРЕЗКА, И НЕ БОЛЬШЕ: ступеней жара три, а полоса с четырьмя одалживала
 * бы лестницу, которой нет. Игра, сыгранная на одной температуре, рисует один
 * отрезок во всю ширину, и это её честная картина.
 */
.jr-heat {
  display: flex;
  height: 9px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.jr-heat__part { display: block; }
.jr-heat__legend {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-2);
}
.jr-heat__name {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

.jr-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.jr-row__name { flex: 1; font: 600 var(--t-title-s) var(--f-sans); color: var(--c-text); }
.jr-row__count { font: 400 var(--t-body-m) var(--f-sans); color: var(--c-muted); }

/*
 * ВИДНА ТОЛЬКО ОДНА ЗАПЕРТАЯ СТУПЕНЬ НА ЛЕСТНИЦУ, и решает это не стиль, а
 * экран. Здесь только то, чем взятая отличается от следующей.
 */
.jr-rungs { display: flex; flex-direction: column; margin-top: var(--s-3); }
.jr-rung {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-border);
}
.jr-rung:first-child { border-top: 0; }
.jr-rung__znak {
  flex: none;
  width: 16px;
  text-align: center;
  color: var(--c-muted);
  line-height: 1.4;
}
.jr-rung--vzyata .jr-rung__znak { color: var(--c-gold); }
.jr-rung__telo { flex: 1; min-width: 0; }
.jr-rung__imya {
  display: block;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
}
.jr-rung--vzyata .jr-rung__imya { color: var(--c-text); }
.jr-rung__pod {
  display: block;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin-top: 2px;
}

.jr-says { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.jr-says__line {
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
  line-height: 1.45;
}
.jr-foot {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  line-height: 1.4;
  margin: var(--s-4) 0 var(--s-8);
}

/* ==========================================================================
   ДЕСКТОП
   ========================================================================== */

/*
 * ЦЕНТРУЕМ, А НЕ РАСТЯГИВАЕМ. Ширина та же, что у остальных экранов каркаса, и
 * `margin-inline: auto` обязателен: `max-width` без него липнет к левому краю.
 * Это записанное правило дома, а не вкус.
 */
@media (min-width: 900px) {
  .jr-wrap {
    max-width: 720px;
    margin-inline: auto;
  }
  .jr-grid { grid-template-columns: repeat(3, 1fr); }
  /*
   * На широком у клеток календаря появляется потолок высоты: квадрат в седьмую
   * долю от 720 это 96 точек, и месяц вырастал в полотно на пол-экрана.
   */
  .jr-cal__denj, .jr-cal__pusto { aspect-ratio: auto; height: 44px; }
  /*
   * КАРТИНА ЭТО ФОН СТРАНИЦЫ, А НЕ ВСЕГО ОКНА. В приложении колонки навигации
   * нет вовсе, и там она честно лежит под всем экраном. У нас она есть, живёт
   * на своей поверхности, и её вид не должен меняться от того, какой раздел
   * открыт: страница красит себя, а не каркас вокруг себя.
   *
   * `--колонка` объявлена на `.frame` и наследуется сюда, поэтому ширина
   * колонки записана в ОДНОМ месте и на 1440 меняется вместе с ней.
   */
  .jr-fon { left: var(--kolonka, 264px); }
}

/* ==========================================================================
   ЗОЛОТАЯ ТОЧКА
   ========================================================================== */

/*
 * ВЕСЬ ДОПУСК, КОТОРЫЙ МЫ СЕБЕ ДАЁМ. Открытие ступени копится молча и
 * показывается, когда человек сам придёт смотреть; окно поверх последнего, что
 * они делали вдвоём, это вмешательство, и приходит оно в худшую минуту, в
 * следующую после. Точка это предложение, а не сообщение.
 *
 * Живёт на плитке «Мы», потому что вкладки «Путь» у нас нет. Плитка позиционно
 * относительна уже своим классом .art (frame.css), поэтому точке хватает
 * абсолютного положения.
 */
.jr-tochka {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .22);
  z-index: 2;
}