/**
 * Календарь: четыре экрана на общих правилах.
 *
 * ОТКУДА. Боевой календарь живёт четырьмя отдельными страницами
 * (`ru/cabinet/calendar/` плюс `edit`, `settings`, `stats`), у каждой свой
 * `<style>` в теле файла и свои цвета. Здесь они сходятся в один раздел
 * каркаса, и цвета берутся из `css/tokens.css`, а не назначаются заново.
 *
 * ЧТО ЗДЕСЬ НЕ ПИШЕТСЯ. Кнопки, чипы, карточки и шторки уже есть в
 * `frame.css`: `.btn`, `.chip`, `.card`, `.eyebrow`. Заводить их копию здесь
 * значит завести второй ответ на тот же вопрос, и однажды они разойдутся.
 * Здесь только то, чего в каркасе нет: сетка месяца, клетка дня, лист задания.
 *
 * ДЕСКТОП И МОБИЛЬНЫЙ РАЗНЫЕ, а не один растянутый. На широком экране главный
 * экран это разворот в три колонки, на телефоне видна только средняя, а кнопки
 * из боковых колонок уходят под листок отдельным блоком. Ровно как на бою.
 *
 * ЛИСТОК: ФОРМА С БОЯ ЧИСЛАМИ, КРАСКА ИЗ ТОКЕНОВ. Зубцы, линия отрыва, дырочка,
 * ширина 380, высоты 460 и 560, четырёхслойная тень перенесены из
 * `ru/cabinet/calendar/index.html` (строки 80-136) как есть. Цвета и шрифты
 * оттуда НЕ перенесены ни одного: бумага это `--c-accent`, чернила
 * `--c-on-gold`, засечное семейство `--f-serif` (Literata), а не Cormorant.
 *
 * ПОЧЕМУ КРАСКУ ПРИШЛОСЬ ПРИТЕМНЯТЬ. Бумага светлая, а вся остальная система
 * тёмная, и цвета, рассчитанные на тёмный фон, по бежевому слепнут: `--c-heat-3`
 * даёт по нему 1.15:1, то есть не виден вовсе, `--c-done` даёт 1.18:1. Поэтому
 * каждый цвет, который ложится НА БУМАГУ, подмешан к чернилам через `color-mix`
 * до 4.5:1 и выше. Доли считаны, а не подобраны на глаз, и записаны у каждой
 * строки. На тёмном фоне те же токены берутся как есть.
 */

/* ---------- полка над календарём ---------- */

/* Какой календарь открыт, чей он и что с сохранением, одной строкой.
   Чипы взяты из каркаса и здесь только теряют свой нижний отступ: полка сама
   отвечает за расстояние до сетки. */
.cal__polka {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.cal__polka .chips { margin-bottom: 0; flex: 1 1 220px; min-width: 0; }

/* Строчка о сохранении. На бою она единственное, что сообщает паре об
   успехе записи: сама отметка это точка в углу клетки, и по ней не понять,
   дошла она до сервера или нет. */
.cal__sostoyanie {
  margin-left: auto;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
}
.cal__sostoyanie--ok { color: var(--c-done); }
.cal__sostoyanie--zhdyom { color: var(--c-gold); }
.cal__sostoyanie--beda { color: var(--c-danger); }

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

.cal {
  display: grid;
  gap: var(--s-4);
}

/* Заголовок месяца со стрелками. */
.cal__shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Шаг по месяцам. Круг 44 на 44, наименьшая зона нажатия по Apple HIG: тот же
   размер и та же мягкая рамка, что у кнопки «назад» в каркасе. */
.cal__shag {
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  transition: border-color var(--m-standard) var(--m-ease),
              color var(--m-standard) var(--m-ease);
}
.cal__shag:hover { border-color: var(--c-gold); color: var(--c-text); }
/* Значок в наборе один и смотрит вправо: назад это он же, повёрнутый. Второй
   контур ради зеркала завёл бы два ответа на один вопрос. */
.cal__shag--nazad .ico { transform: rotate(180deg); }

.cal__mesyats {
  font: 600 clamp(18px, 4.4vw, 22px)/1.2 var(--f-sans);
  color: var(--c-text);
}

/* ---------- числа ---------- */

/* Сколько отмечено и сколько дней впереди: боевая правая колонка. */
.cal__chisla { display: flex; gap: var(--s-8); margin-top: var(--s-2); }

.cal__chislo {
  font: 400 var(--t-headline-m) var(--f-serif);
  color: var(--c-gold-light);
}

.cal__yarlyik {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-faint);
  margin-top: var(--s-1);
}

/* Те же числа в правой колонке разворота: прижаты к правому краю и крупнее.
   42 это боевой кегль `.hero-stats .v`; в шкале текста такой ступени нет,
   старшая это 36, а число здесь не заголовок, а витрина. */
.cal__chisla--sprava { justify-content: flex-end; gap: 28px; }
.cal__chisla--sprava > div { text-align: right; }
.cal__chisla--sprava .cal__chislo { font-size: 42px; line-height: 1; }

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН: РАЗВОРОТ С ОТРЫВНЫМ ЛИСТКОМ
   ==========================================================================
   Перенос с боя, `ru/cabinet/calendar/index.html`, строки 80-136 и 279-345.
   Числа геометрии оттуда как есть, краска и шрифты из наших токенов.
   ========================================================================== */

/* Разворот. На телефоне одна колонка, на широком 1fr 380px 1fr: боковые
   колонки одинаковой ширины, листок посередине ровно своей ширины. */
.cal__razvorot {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}

/* Боковые колонки телефону не показываем совсем, а не сжимаем: их содержимое
   переезжает под листок отдельным блоком. Так на бою. */
.cal__sleva,
.cal__sprava { display: none; }

/* Центр: листок и стрелки дня под ним. 380 это ширина листка, 14 зазор до
   стрелок; обоих чисел в шкале нет, они боевые. */
.cal__tsentr {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ---------- сама бумага ---------- */

/*
 * БУМАГА И ЧЕРНИЛА ЖИВУТ ЗДЕСЬ И ТОЛЬКО ЗДЕСЬ.
 *
 * Внутри листка всё светлое, а вокруг всё тёмное, поэтому свои имена цвета
 * объявлены на самом листке: каждое правило ниже берёт их отсюда и ни одно не
 * называет краску по месту. Низ бумаги считается из верха через `color-mix`, а
 * не пишется вторым цветом: на бою это два кремовых `#f5edd8` и `#ebe0c4`, и
 * второй такой же кремовый у нас был бы хардкодом.
 */
.cal__listok {
  --bumaga: var(--c-accent);
  --bumaga-niz: color-mix(in srgb, var(--c-accent) 92%, var(--c-on-gold));
  --chernila: var(--c-on-gold);

  position: relative;
  width: 100%;
  max-width: 380px;
  min-height: 460px;
  /* 6 это лист бумаги, а не карточка каркаса: у карточки младший радиус 12, и
     на бумаге он читался бы скруглённым уголком открытки. Число боевое. */
  border-radius: 6px;
  padding: 36px 32px 48px;
  background: linear-gradient(180deg, var(--bumaga) 0%, var(--bumaga-niz) 100%);
  color: var(--chernila);
  /* Четыре слоя с боя: блик по верхнему краю, тень по нижнему, падающая тень и
     тёплый отсвет под ней. Первые три нейтральные полупрозрачные, четвёртый
     золотой и потому взят из токена. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 -1px 0 rgba(0, 0, 0, .05) inset,
    0 30px 60px -25px rgba(0, 0, 0, .7),
    0 60px 100px -40px color-mix(in srgb, var(--c-gold) 20%, transparent);
}

@media (min-width: 768px) {
  .cal__listok { min-height: 560px; padding-bottom: 56px; }
}

/* Зубцы по верхнему краю: полоса бумаги, из которой вырезаны полукруглые
   выемки, а сама полоса обрезана пилой. Тридцать три точки многоугольника
   перенесены с боя как есть: пересказать их своими словами значит получить
   похоже, но не то. */
.cal__listok::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 8px;
  background: radial-gradient(circle at 6px 8px, transparent 3px, var(--bumaga) 3.5px);
  background-size: 12px 8px;
  clip-path: polygon(0% 100%, 3% 30%, 6% 70%, 9% 20%, 12% 80%, 15% 30%, 18% 70%, 21% 20%, 24% 80%, 27% 30%, 30% 70%, 33% 20%, 36% 80%, 39% 30%, 42% 70%, 45% 20%, 48% 80%, 51% 30%, 54% 70%, 57% 20%, 60% 80%, 63% 30%, 66% 70%, 69% 20%, 72% 80%, 75% 30%, 78% 70%, 81% 20%, 84% 80%, 87% 30%, 90% 70%, 93% 20%, 96% 80%, 100% 30%, 100% 100%);
}

/* Линия отрыва: пунктир перфорации под зубцами. Штрих нейтральный
   полупрозрачный, как на бою: это тень в бумаге, а не краска. */
.cal__listok::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18px;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .25) 2px,
    transparent 2px, transparent 6px);
  opacity: .5;
}

/* Дырочка под гвоздь: сквозь неё виден фон страницы, поэтому она красится
   фоном приложения, а не своим чёрным. */
.cal__dyirochka {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

/* Неровность бумаги: два мягких пятна умножением. Нейтральные и
   полупрозрачные, краски в них нет. */
.cal__tekstura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, .05), transparent 40%);
  mix-blend-mode: multiply;
}

/* Текст листка начинается ниже дырочки. Отступ боевой. */
.cal__listTelo { position: relative; padding-top: 32px; text-align: center; }

/* ---------- строки на бумаге ---------- */

/*
 * КАЖДАЯ СТРОКА НА БУМАГЕ ПРОВЕРЕНА НА КОНТРАСТ, и доли подмеса стоят рядом с
 * получившимся отношением. Боевые доли сюда не годятся: там бумага `#f5edd8`,
 * у нас `#f5d0a9`, она темнее и теплее, и та же прозрачность даёт на ней
 * меньше. Порог 4.5:1, как для обычного текста, и мерено по низу градиента,
 * `#e4c19c`: он темнее верха, и на нём хуже.
 *
 * Сами чернила по бумаге дают 12.1:1. Запаса хватает на всё, что ниже.
 */

/* День недели или тематическое имя дня. Чернила 70%: боевые 55% дают 3.50:1. */
.cal__listMeta {
  margin: 0;
  font: 600 11px/1.4 var(--f-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chernila) 70%, transparent);   /* 5.41:1 */
}

/* Число и месяц в одну строку по общей базовой линии. Зазор и отступы боевые.
   Перенос разрешён: у нас десять языков, и «septiembre» рядом со 140-м кеглем
   в 380 не встаёт, а обрезать месяц значило бы соврать про дату. */
.cal__listData {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 4px;
}

/*
 * ЧИСЛО ДНЯ. Боевые кегли 116 и 160 сняты с Cormorant Garamond, а у нас Literata,
 * и она примерно на четверть шире. 116 на телефоне влезает и оставлено как есть,
 * а 160 на широком экране вместе с длинным месяцем выходит за 380 и уменьшено до
 * 140. Межстрочье .85 боевое и годится: у цифр нет свеса.
 */
.cal__listChislo {
  font: 400 116px/.85 var(--f-serif);
  color: var(--chernila);
}

/* Месяц курсивом. Чернила 75%, боевая доля, её хватает: 6.27:1. */
.cal__listMesyats {
  font: italic 400 28px/.9 var(--f-serif);
  color: color-mix(in srgb, var(--chernila) 75%, transparent);   /* 6.27:1 */
}

@media (min-width: 768px) {
  .cal__listChislo { font-size: 140px; }
  .cal__listMesyats { font-size: 30px; }
}

/* Черта между датой и заданием. Тонкая тень в бумаге, доля боевая. */
.cal__listCherta {
  display: block;
  height: 1px;
  margin: 18px 0 14px;
  background: color-mix(in srgb, var(--chernila) 20%, transparent);
}

/*
 * МЕТКА ЗАДАНИЯ, И ЗДЕСЬ ЖЕ ОБЕ ЛОВУШКИ КОНТРАСТА.
 *
 * На бою метка всегда одного золотого цвета. У нас она носит цвет уровня, а
 * лестница жара рассчитана на ТЁМНЫЙ фон, и по бежевой бумаге верхние её
 * ступени слепнут: `--c-heat-3` даёт 1.15:1, то есть исчезает совсем.
 * Поэтому каждая ступень подмешана к чернилам ровно настолько, чтобы выйти за
 * 4.5:1, и доли у ступеней РАЗНЫЕ: они разной светлоты, одна доля на всех
 * означала бы у них разное. Запасной цвет без уровня это золото, ему нужно то
 * же лечение.
 *
 * Мерено по НИЗУ градиента, `#e4c19c`: метка и задание стоят в нижней половине
 * листка, а низ темнее верха, и по верху те же доли дают на .8 больше. Считать
 * по светлому концу значило бы проверить не тот фон.
 */
.cal__listTeg {
  margin: 0;
  font: 600 10px/1.4 var(--f-mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-gold) 36%, var(--chernila));   /* было 1.24:1, стало 4.75 */
}
.cal__listTeg--zh1 { color: color-mix(in srgb, var(--c-heat-1) 50%, var(--chernila)); } /* было 2.04:1, стало 4.63 */
.cal__listTeg--zh2 { color: color-mix(in srgb, var(--c-heat-2) 36%, var(--chernila)); } /* было 1.25:1, стало 4.75 */
.cal__listTeg--zh3 { color: color-mix(in srgb, var(--c-heat-3) 30%, var(--chernila)); } /* было 1.15:1, стало 4.65 */
.cal__listTeg--zh4 { color: color-mix(in srgb, var(--c-heat-4) 42%, var(--chernila)); } /* было 1.59:1, стало 4.77 */
.cal__listTeg--zh5 { color: color-mix(in srgb, var(--c-heat-5) 53%, var(--chernila)); } /* было 2.13:1, стало 4.65 */

/* Само задание. Боевые 20 и 22 сняты с Cormorant; у Literata рост строчных
   выше, поэтому кегль на ступень ниже, а межстрочье с 1.3 поднято до 1.4:
   в 1.3 её строки слипаются. */
.cal__listZadanie {
  margin: 0;
  padding: 14px 4px 0;
  font: italic 400 18px/1.4 var(--f-serif);
  color: var(--chernila);
}

@media (min-width: 768px) {
  .cal__listZadanie { font-size: 20px; }
}

/* Подпись внизу страницы. Чернила 68%: боевые 45% дают по низу бумаги 2.59:1. */
.cal__listNiz {
  margin: 14px 0 0;
  font: 600 9px/1.4 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chernila) 68%, transparent);   /* 4.72:1 */
}

/*
 * ШТАМП «ВЫПОЛНЕНО», вторая ловушка контраста. `--c-done` по бумаге это
 * 1.18:1, то есть штамп читался бы только по своей рамке. Буквы подмешаны к
 * чернилам до 4.87:1, рамка до 3.34:1 (рамка не слово, ей порог 3), а заливка
 * осталась мягким пятном, как на бою.
 */
.cal__shtamp {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  padding: 4px 12px;
  /* 4 это оттиск печати, самый жёсткий угол на странице. Число боевое, в шкале
     радиусов такой ступени нет и не должно быть. */
  border-radius: 4px;
  border: 2px solid color-mix(in srgb, var(--c-done) 50%, var(--chernila));  /* 3.34:1 */
  background: color-mix(in srgb, var(--c-done) 18%, transparent);
  color: color-mix(in srgb, var(--c-done) 35%, var(--chernila));             /* 4.87:1 */
  font: 700 11px/1.4 var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .95;
}

/* ---------- стрелки дня ---------- */

/* Стрелки листают ДЕНЬ, а не месяц: на бою это `changeDay(-1)` и `changeDay(1)`.
   Сами кнопки взяты у шага по месяцам (`.cal__шаг`): круг 44 по Apple HIG, а не
   боевые 36, потому что зона нажатия это правило каркаса, а не оформление. */
.cal__khodDnya {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}

/* Ширина держится числом, чтобы счётчик не дёргал стрелки при смене дня.
   Число боевое. */
.cal__schyotchikDnya {
  min-width: 120px;
  text-align: center;
  font: 600 11px/1.4 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- под листком: то, что на широком экране лежит в колонках ---------- */

.cal__podListkom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: 14px;
}
.cal__podListkom .cal__knopki { width: 100%; max-width: 300px; }
.cal__podListkom .cal__delyozh { justify-content: center; }

/* ---------- боковые колонки ---------- */

/* Крупный засечный заголовок колонок. Кегли боевые (60 слева, 44 справа, 30 у
   подзаголовка) стоят верхней границей, а нижняя взята из ширины колонки:
   Literata шире Cormorant примерно на четверть, и «Сегодняшняя» в 60 не влезает
   в колонку при 1024. Поэтому кегль тянется вместе с экраном и доходит до
   боевого числа там, где оно помещается. */
.cal__zagolovok {
  margin: 0;
  font: 400 clamp(34px, 3.9vw, 60px)/1 var(--f-serif);
  letter-spacing: -.01em;
  color: var(--c-text);
}
.cal__zagolovok em { font-style: italic; color: var(--c-gold-light); }

.cal__zagolovok--pr { font-size: clamp(28px, 2.9vw, 44px); line-height: 1.05; }

.cal__podzagolovok {
  font-style: italic;
  color: var(--c-gold-light);
  font-size: clamp(20px, 2vw, 30px);
}

/* Подводка колонок: курсивная и приглушённая, как на бою. */
.cal__podvodka {
  margin: 0;
  font: italic 400 var(--t-body-l) var(--f-serif);
  color: var(--c-muted);
  max-width: 380px;
}
.cal__sprava .cal__podvodka { max-width: 260px; }

/* Золотая черта под подводкой: 60 на 1, растворяется к обоим концам. */
.cal__cherta {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 50%, transparent);
}

/* Кнопки левой колонки стоят В РЯД, а не столбиком, и это не спор со сквозным
   правилом каркаса: правило про телефон, где кнопок до четырёх и они не
   помещаются. Здесь их две и ширины хватает, а на телефоне эта колонка
   спрятана целиком. */
.cal__deystviya { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

.cal__deystviyaSprava {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
  margin-top: var(--s-3);
}

/* ---------- разворот на широком экране ---------- */

/*
 * 1024 это боевая граница разворота, и она НЕ СОВПАДАЕТ с 900, на которой
 * расходится правка дня. Так и должно быть: там две колонки, здесь три, и
 * средней из них нужны свои 380 плюс две боковые.
 */
@media (min-width: 1024px) {
  .cal__razvorot {
    grid-template-columns: 1fr 380px 1fr;
    /* 36 и 16 боевые; 16 это var(--s-4), а ступени 36 в шкале отступов нет. */
    gap: 36px;
    padding: var(--s-4) 0;
  }

  .cal__sleva,
  .cal__sprava {
    display: flex;
    flex-direction: column;
    /* 18 боевое; в шкале рядом стоят 16 и 20, и обе меняют ритм колонки. */
    gap: 18px;
    min-width: 0;
  }

  .cal__sprava { align-items: flex-end; text-align: right; }

  /* Блок под листком нужен только телефону: на широком экране те же кнопки
     стоят в колонках, и второй раз это уже повтор.

     Соседа `.cal__тольМоб` здесь больше нет: подводку над листком владелец
     убрал совсем, и правило осталось бы враньём о виде, которого не бывает. */
  .cal__podListkom { display: none; }
}

/* ---------- лист задания ---------- */

.cal__list {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sheet);
  background: var(--c-surface);
  align-content: start;
}

/* Метка дня бывает длинной («Задание дня · откровенно», тематическое имя из
   корпуса), а надзаголовок каркаса однострочный и режет хвост многоточием:
   он придуман стоять НАД списком. Здесь он строка сама по себе, и уровень
   задания терять нельзя. Полосу «поделиться» это не касается: там он ярлык в
   ряду кнопок и обязан остаться в одну строку. */
.cal__list > .eyebrow { white-space: normal; overflow: visible; }

/* Что за день. Засечным, как заголовки блоков в каркасе: это имя страницы, а
   не подпись к ней. */
.cal__data {
  font: 400 var(--t-title-l) var(--f-serif);
  color: var(--c-text);
  margin: 0;
}

.cal__zadanie {
  font: 400 clamp(15px, 3.8vw, 17px)/1.5 var(--f-sans);
  color: var(--c-text);
  margin: 0;
}

/* День без задания: говорим прямо, а не показываем пустоту. */
.cal__pusto {
  font: 400 15px/1.5 var(--f-sans);
  color: var(--c-faint);
  margin: 0;
}

/* «День 5 из 365». */
.cal__schyot {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-faint);
  margin: 0;
}

/* Кнопки столбиком, а не в ряд: сквозное правило каркаса (docs/refactor/RULES).
   Их тут до четырёх, и в ряд на телефоне они превращаются в кашу. */
.cal__knopki { display: flex; flex-direction: column; gap: var(--s-2); }
.cal__knopki .btn { width: 100%; }

/* ---------- поделиться ---------- */

.cal__delyozh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.cal__delyozh .eyebrow { margin-right: var(--s-1); }

/* Круглые, потому что внутри знак сети, а не слово. Единственное круглое
   исключение из прямоугольных органов управления, вместе с лицом и точкой. */
.cal__delyozhKn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  transition: border-color var(--m-standard) var(--m-ease),
              color var(--m-standard) var(--m-ease);
}
.cal__delyozhKn:hover { border-color: var(--c-gold); color: var(--c-text); }

/* ---------- зов завести свой ---------- */

/* Пунктир, а не сплошная рамка: этого блока ещё нет, он предложение. Так же
   он выглядит и на бою. */
.cal__zov {
  margin-top: var(--s-6);
  padding: var(--s-6) var(--s-5);
  /* Золото прозрачностью, а не третьей записью тех же 212 175 55: доли боевые,
     цвет из токена. */
  border: 1px dashed color-mix(in srgb, var(--c-gold) 35%, transparent);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-gold) 6%, transparent),
    color-mix(in srgb, var(--c-gold) 2%, transparent));
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.cal__zovZagolovok {
  font: 400 var(--t-headline-s) var(--f-serif);
  color: var(--c-text);
  margin: 0;
}

.cal__zovTekst {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  max-width: 52ch;
  margin: 0;
}

/* ---------- правка дня ---------- */

/* «Сейчас здесь стоит вот это»: общее задание, показанное пишущему как
   подсказка. Пунктир и вложенная поверхность говорят, что текст ЧУЖОЙ и
   заменяемый, в отличие от своего задания, которое стоит прямо на листе. */
.cal__podskazka {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
}

/* Строка под полем: слева сколько написано, справа предел. Предел стоит здесь
   ДО того, как в него упрутся, а не приходит отказом сервера после. */
.cal__podpole {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

.cal__schyotchik {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-faint);
}

/* Знаки кончились. Красным, потому что дальше поле просто не примет букву, и
   молчаливое сопротивление клавиатуры пугает сильнее, чем сказанное вслух. */
.cal__schyotchik--predel { color: var(--c-danger); }

/* ---------- широкий экран ---------- */

@media (min-width: 900px) {
  /* Правка это ДВЕ колонки, а главный экран три, и границы у них тоже разные:
     900 здесь, 1024 у разворота с листком. Слева узкая справка про день,
     справа широкое поле, потому что здесь пишут, а не читают. */
  .cal--pravka {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-5);
  }

  /* Дни месяца в две колонки. Тридцать строк одним столбцом на широком экране
     это лента в два экрана длиной при пустых полях по бокам. */
  .cal__dni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-5);
  }
}

/* ==========================================================================
   СТАТИСТИКА
   ==========================================================================
   Экран `next/js/screens/calendar-stats.js`. Своего здесь мало: полка, шапка,
   числа и кнопки взяты выше и из каркаса, ново только то, чего нигде нет, то
   есть сама полоса года.
   ========================================================================== */

/* Шапка окна: год со стрелками у корпуса, название у личного календаря. Та же
   шапка, что листает месяц, отсюда только отступ до чисел. */
.cal__shapka--st { margin-bottom: var(--s-4); }

/* Упёршаяся стрелка. Год уходит вниз до 2024 и вверх до 2035, дальше сервер
   отвечает отказом, и кнопка обязана показать, что дороги нет. */
.cal__shag:disabled { opacity: .35; cursor: default; }
.cal__shag:disabled:hover { border-color: var(--c-border-strong); color: var(--c-muted); }

/* Чисел здесь ЧЕТЫРЕ, а не два, и в один ряд на телефоне они не встают.
   Основа 120: два числа в ряд на узком экране, четыре на широком. */
.cal__chisla--chetyire { flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.cal__chisla--chetyire > div { flex: 1 1 120px; min-width: 0; }

/* Довесок при числе: «/ 365», «%», «дн». На бою это <em> вполовину меньше
   самого числа; здесь ступень шкалы, ближайшая к той же доле. */
.cal__iz {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-gold-light);
  margin-left: var(--s-1);
}

/* ---------- полоса года ---------- */

/*
 * ГОД ЦЕЛИКОМ В ЛЮБУЮ ШИРИНУ, и в этом вся разница с боем.
 *
 * На бою клетка 14 пикселей, полоса из 53 недель занимает 900 и до 767
 * прячется целиком: телефону вместо неё показывают сетку одного месяца. Здесь
 * клетка это ДОЛЯ КОЛОНКИ, `grid-auto-columns: minmax(0, 1fr)`, поэтому год
 * умещается и в 340 пикселей, просто клеткой в четыре. Читается она при этом
 * не хуже: полоса отвечает на вопрос «какой формы был год», а не «что было
 * пятого марта», на второй отвечает сетка месяца на главном экране.
 *
 * Верхний предел ширины держит клетку от раздувания на широком экране и на
 * коротком календаре: у календаря на две недели колонок всего две, и без
 * предела они разъехались бы на пол-экрана каждая. 18 это боевые 14 плюс
 * зазор; в шкале отступов такой ступени нет, она про поля, а не про клетки.
 */
.cal__polosa {
  margin-top: var(--s-3);
  max-width: calc(var(--nedelj) * 18px);
}

/* Подписи месяцев стоят в той же сетке, что и клетки: каждая занимает ровно
   столько колонок, сколько недель в её месяце, и разъехаться ей не с чем.
   Колонки НЕ ОБЪЯВЛЕНЫ, их наводят сами подписи: экран ставит каждую в её
   колонку (`grid-column: 5/span 4`), подписи покрывают год без пропусков, и
   сетка достраивает ровно столько колонок, сколько в году недель. Написать
   `repeat(var(--недель), ...)` было бы понятнее, но счётчик повторов из
   переменной браузеры принимают не все. */
.cal__metki {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  /* Зазор своим числом: младшая ступень шкалы это 4, а при 53 колонках зазоры
     съели бы больше половины телефона. Растёт вместе с экраном. */
  gap: clamp(1px, .35vw, 3px);
  margin-bottom: var(--s-1);
}
.cal__metki span {
  font: 600 10px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
  overflow: hidden;
}

.cal__god {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1px, .35vw, 3px);
}

/* Клетка квадратная от ширины колонки, поэтому высота полосы считается сама.
   Скругление 2: младший радиус шкалы это 12, а клетка бывает и в четыре
   пикселя, на ней он превратил бы квадрат в точку. */
.cal__kletka {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--c-surface-alt);
}

/* Хвосты первой и последней недели: место держат, дня в них нет. */
.cal__kletka--net { visibility: hidden; }

.cal__kletka--sdelan { background: var(--c-gold); }

/* Сегодня обводкой, а не заливкой: заливка спорила бы с отметкой. */
.cal__kletka--segodnya { outline: 1px solid var(--c-gold-light); outline-offset: 1px; }

/* Дни, которые ещё не наступили. */
.cal__kletka--vperyod { opacity: .4; }

.cal__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-faint);
}
.cal__lg { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Образцу размер задать некому: в полосе его даёт колонка сетки, а здесь
   сетки нет. Число боевое, там образец легенды тоже 11. */
.cal__legenda .cal__kletka { width: 11px; height: 11px; flex: 0 0 auto; }

/* ---------- хроника последних семи дней ---------- */

/*
 * ОТКУДА. Боевой блок `.chronicle` (`ru/cabinet/calendar/index.html`, 149-176).
 * Геометрия оттуда числами, краска и шрифты наши.
 *
 * ЗАЧЕМ ОНА РЯДОМ С ЛИСТКОМ. Листок отвечает «что сегодня», хроника «что мы
 * пропустили». Её однажды уже выбросили вместе с листком, и пропажу заметил
 * владелец, а не проверка: пустое место не на что ругаться.
 */
.cal__khronika {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.cal__zagolovok--khr { font-size: clamp(20px, 2.4vw, 28px); margin: var(--s-1) 0 var(--s-4); }

/* Полоски между строками сделаны фоном списка, а не рамками строк: так они не
   удваиваются на стыке и не спорят с закруглением по краям. Приём с боя. */
.cal__khrSpisok {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Кнопка, а не строка с обработчиком, как на бою: нажимаемое должно
   открываться и с клавиатуры. Отсюда сброс кнопочных умолчаний. */
.cal__khrStroka {
  display: grid;
  grid-template-columns: 64px 110px 1fr 72px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--m-standard) var(--m-ease);
}
.cal__khrStroka:hover { background: var(--c-surface-high); }

/* Сегодня: золотая грань слева и еле заметная подсветка, как на бою. */
.cal__khrStroka--nyinche {
  background: color-mix(in srgb, var(--c-gold) 5%, var(--c-surface));
  box-shadow: inset 2px 0 0 var(--c-gold);
}

/* Сделанный день чуть тише: он уже отработал. */
.cal__khrStroka--gotov { opacity: .85; }

.cal__khrChislo {
  font: 500 22px/1 var(--f-serif);
  font-style: italic;
  color: var(--c-text);
}

.cal__khrPodpisj {
  display: block;
  font: 400 9px/1 var(--f-mono);
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-faint);
  margin-top: 3px;
}

/* Уровень пилюлей. Цвет берётся из шкалы жара, той же, что у листка и у
   полосы каркаса: у календаря ровно пять ступеней, и шкала для них и заведена. */
.cal__khrUrovenj {
  font: 600 9px/1.4 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 6px;
  border-radius: 99px;
  color: var(--c-muted);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal__khrUrovenj--zh1 { color: var(--c-heat-1); border-color: color-mix(in srgb, var(--c-heat-1) 40%, transparent); background: color-mix(in srgb, var(--c-heat-1) 8%, transparent); }
.cal__khrUrovenj--zh2 { color: var(--c-heat-2); border-color: color-mix(in srgb, var(--c-heat-2) 40%, transparent); background: color-mix(in srgb, var(--c-heat-2) 8%, transparent); }
.cal__khrUrovenj--zh3 { color: var(--c-heat-3); border-color: color-mix(in srgb, var(--c-heat-3) 40%, transparent); background: color-mix(in srgb, var(--c-heat-3) 8%, transparent); }
.cal__khrUrovenj--zh4 { color: var(--c-heat-4); border-color: color-mix(in srgb, var(--c-heat-4) 40%, transparent); background: color-mix(in srgb, var(--c-heat-4) 8%, transparent); }
.cal__khrUrovenj--zh5 { color: var(--c-heat-5); border-color: color-mix(in srgb, var(--c-heat-5) 40%, transparent); background: color-mix(in srgb, var(--c-heat-5) 8%, transparent); }

/* Текст задания в одну строку с многоточием: хроника это обзор, а не чтение.
   На бою здесь обрезка по 110 знаков в коде; многоточием занимается css, и
   тогда обрезка не зависит от того, какой язык длиннее. */
.cal__khrTekst {
  font: 400 14.5px/1.35 var(--f-serif);
  font-style: italic;
  color: var(--c-text);
  opacity: .92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal__khrSostoyanie {
  text-align: right;
  font: 400 10px/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
}
.cal__khrStroka--gotov .cal__khrSostoyanie { color: var(--c-done); }

/* Телефон: число, уровень и состояние в верхнюю строку, задание во всю ширину
   под ними. Четыре колонки по 64+110+1fr+72 в 360 не помещаются. С боя. */
@media (max-width: 560px) {
  .cal__khronika { margin-top: var(--s-6); padding-top: var(--s-5); }
  .cal__khrStroka {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--s-2) var(--s-3);
  }
  .cal__khrChislo { grid-row: 1; }
  .cal__khrUrovenj { grid-row: 1; justify-self: start; }
  .cal__khrSostoyanie { grid-row: 1; }
  .cal__khrTekst { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}