/* ЧАСТИ: кнопки, поля ввода, карточки, лента из 66 дней.
   Всё нажимаемое здесь не ниже 48px и отзывается на касание —
   без отклика приложение кажется зависшим. */

/* ═══ ЗОЛОЧЁНЫЙ ОБРЕЗ ═══
   Примета всего приложения. Полоска слева у каждой страницы —
   яркая вверху, сходящая на нет книзу: так ловит свет позолота
   на срезе книжного блока. Одна строчка кода на элемент, а держит
   весь набор вместе крепче любого цвета. */
.обрез,.карточка,.весть,.тест-строка,.крупная,.ответ{
  position:relative;
  overflow:hidden;
}
.обрез::before,
.карточка::before,.весть::before,.тест-строка::before,
.крупная::before,.ответ::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,
    var(--награда-ярче) 0%, var(--награда) 34%,
    rgba(201,162,74,.35) 68%, transparent 100%);
  pointer-events:none;
}

/* --- ГЛАВНАЯ КНОПКА. Литая фольга.
   Растяжка от светлого золота к глубокому, тонкая светлая грань
   сверху и тёмная снизу — так выглядит выпуклый металл, а не
   заливка. Поперёк раз в несколько секунд проходит блик.
   При касании кнопка проседает, блик уходит, грань гаснет. --- */
.главная{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  width:100%;
  min-height:var(--касание);
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.015em;
  border:none;
  cursor:pointer;
  padding:16px 22px;
  border-radius:var(--скругление-кнопки);
  margin-top:14px;
  color:var(--на-светлом);
  background:var(--фольга);
  background-size:180% 180%;
  box-shadow:
    inset 0 1px 0 rgba(255,250,235,.9),
    inset 0 -2px 6px rgba(90,64,10,.28),
    0 14px 30px -14px rgba(201,162,74,.55),
    0 2px 8px rgba(3,7,14,.5);
  transition:transform .28s var(--плавно), box-shadow .28s var(--плавно);
}

/* Блик поперёк кнопки: проходит редко, а не мельтешит */
.главная::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(104deg,
    transparent 40%, rgba(255,252,242,.75) 50%, transparent 60%);
  transform:translateX(-130%);
  animation:блик 7s ease-in-out infinite;
}
@keyframes блик{
  0%,62%{transform:translateX(-130%)}
  86%,100%{transform:translateX(130%)}
}

.главная:active{
  transform:translateY(1px) scale(.99);
  box-shadow:
    inset 0 1px 0 rgba(255,250,235,.5),
    inset 0 2px 8px rgba(90,64,10,.34),
    0 6px 16px -10px rgba(201,162,74,.4);
}
.главная:disabled{
  background:rgba(247,239,224,.16);
  color:rgba(247,239,224,.42);
  box-shadow:inset 0 0 0 1px rgba(247,239,224,.20);
  cursor:default;
  transform:none;
}
.главная:disabled::after{display:none}

/* --- РЯД КНОПОК: «Назад» и «Дальше» рядом. Обе одной высоты,
   «Дальше» шире — шаг вперёд главнее возврата. На узком экране
   ряд не ломается: кнопки ужимаются, а не переносятся. --- */
.ряд-кнопок{display:flex;gap:10px;align-items:stretch;margin-top:14px}
.ряд-кнопок .тихая,.ряд-кнопок .главная{margin-top:0;flex:1 1 0;min-width:0}
.ряд-кнопок .главная{flex-grow:1.6}
.ряд-кнопок .тихая{display:flex;align-items:center;justify-content:center}

/* Тихая кнопка: «Понятно», «Прошлые желания» — не главный шаг,
   поэтому без заливки, одним золотом */
.тихая{
  display:block;
  width:100%;
  min-height:var(--касание);
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
  background:none;
  color:var(--награда);
  padding:15px;
  margin-top:8px;
  border-radius:var(--скругление-кнопки);
  transition:background .18s var(--плавно), color .18s var(--плавно);
}
.тихая:active{background:rgba(201,162,74,.14);color:var(--награда-ярче)}

/* Та же тихая, но с рамкой — когда она стоит на пергаменте
   и без рамки читалась бы как подпись, а не как кнопка */
.тихая-рамка{
  border:1px solid var(--лист-край);
  background:rgba(59,44,16,.05);
  color:var(--на-светлом);
}
.тест-строка .тихая{color:var(--на-светлом)}

/* Рамочная кнопка задумана для пергамента, и цвет у неё чернильный.
   Прямо на небе такая кнопка почти не видна: тёмное на тёмном.
   Там, где она стоит на небе — экран целиком или ряд кнопок, —
   она берёт золото. Внутри страниц правило прежнее. */
.экран > .тихая-рамка,
.ряд-кнопок > .тихая-рамка{
  color:var(--награда);
  border-color:var(--нить);
  background:rgba(201,162,74,.06);
}

/* --- Вариант ответа в тесте: страница поменьше --- */
.ответ{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  min-height:var(--касание);
  text-align:left;
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:500;
  color:var(--на-светлом);
  background:var(--лист);
  border:1px solid var(--лист-край);
  cursor:pointer;
  padding:16px 18px 16px 21px;
  border-radius:var(--скругление);
  margin-bottom:10px;
  box-shadow:var(--тень-мягкая);
  transition:transform .18s var(--плавно), background .18s var(--плавно);
}
.ответ:active{transform:scale(.99);background:var(--лист-нажат)}
/* Выбранный вариант успевает загореться до смены вопроса — иначе
   непонятно, засчиталось ли касание */
.ответ[data-выбран]{
  background:var(--лист-нажат);
  box-shadow:var(--тень-мягкая), inset 0 0 0 1px var(--награда);
}

/* --- Поля ввода. Обычное текстовое поле выбрано намеренно:
   клавиатура телефона даёт свой микрофон, и человек может
   наговорить ответ голосом. Своей кнопки записи не нужно. --- */
label{display:block;margin-bottom:22px}
label .метка{display:block;margin-bottom:12px}

textarea{
  width:100%;
  background:var(--лист);
  border:1px solid var(--лист-край);
  color:var(--на-светлом);
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  padding:16px 18px;
  resize:none;
  overflow:hidden;
  min-height:60px;
  border-radius:var(--скругление);
  box-shadow:var(--тень-мягкая);
  transition:box-shadow .18s var(--плавно);
}
textarea:focus{
  outline:none;
  box-shadow:var(--тень-мягкая), inset 0 0 0 1px var(--награда);
}
textarea::placeholder{color:var(--на-светлом-тихое);opacity:.5}

/* Подсказка про диктовку стоит сразу под полем, поэтому подтянута */
.подсказка{margin-top:-14px;margin-bottom:24px}

/* --- СТРАНИЦЫ: карточка, весть, строка теста, счёт ---
   У всех один материал и один золочёный обрез слева. Разница
   только в содержимом, и это нарочно: разнобой подложек — первое,
   от чего экран рассыпается на несвязанные куски. */
.карточка,.весть,.тест-строка,.счёт{
  position:relative;
  overflow:hidden;
  background:var(--лист);
  color:var(--на-светлом);
  border:1px solid var(--лист-край);
  border-radius:var(--скругление);
  box-shadow:var(--тень);
}
.карточка,.весть,.тест-строка{padding:24px 22px 24px 25px;margin:16px 0}
.карточка p:first-child b{font-size:19px}
.карточка .метка,.тест-строка .метка,.весть .метка{color:var(--на-светлом-тихое)}
.карточка h2,.весть h2,.тест-строка h2{color:var(--на-светлом)}

/* Весть 21-го и 66-го дня — единственное, у чего обрез во всю
   высоту и ярче: это событие, а не обычная карточка */
.весть::before{
  background:linear-gradient(180deg,
    var(--награда-ярче) 0%, var(--награда) 55%, var(--награда-глубже) 100%);
  width:4px;
}
.весть h2{margin-bottom:14px}

/* Желание человека на экране дня — курсивом, за золотой чертой */
.желание{
  font-family:"Cormorant",Georgia,serif;
  font-size:20px;
  font-style:italic;
  color:var(--письмо);
  border-left:2px solid var(--награда);
  padding-left:16px;
  margin:14px 0 0;
}

/* Счётчик шагов в тесте */
.шаги{
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--тихое);
  margin-top:20px;
}

/* --- ЛЕНТА 66 ДНЕЙ. Точки идут подряд одной лентой и переносятся
   сами, где кончилось место. Сетку по семь дней в ряд автор
   отменила. Дни 1, 21 и 66 крупнее и подписаны цифрой.

   Непрожитый день — едва заметная вмятина на пергаменте.
   Отмеченный — золотая капля с бликом сверху. Разница видна
   с расстояния вытянутой руки, а это единственное расстояние,
   с которого на трекер и смотрят. --- */
.дни{
  display:flex;
  flex-wrap:wrap;
  gap:18px 7px;
  align-items:center;
  margin:22px 0 34px;
}
.день{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
}
.день i{
  display:block;
  width:11px;height:11px;
  border-radius:50%;
  background:rgba(59,44,16,.13);
  box-shadow:inset 0 1px 1px rgba(59,44,16,.18);
}
.день[data-было] i{background:rgba(59,44,16,.22)}
.день[data-отмечен] i{
  background:linear-gradient(160deg,#F7E7BC 0%,#D8B45F 45%,#A8801F 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.9), 0 1px 3px rgba(90,64,10,.45);
}
.день[data-сегодня] i{
  background:transparent;
  box-shadow:0 0 0 2px var(--награда);
}
.день[data-сегодня][data-отмечен] i{
  background:linear-gradient(160deg,#F7E7BC 0%,#D8B45F 45%,#A8801F 100%);
  box-shadow:0 0 0 2px var(--награда-ярче), 0 0 14px rgba(201,162,74,.6);
}
.день[data-веха] i{width:19px;height:19px}
.день[data-веха]:not([data-отмечен]) i{box-shadow:inset 0 0 0 1px rgba(59,44,16,.3)}

/* Цифра под границей — не текст, а подпись к точке. Cormorant:
   у него цифра выглядит выгравированной, а не набранной. */
.номер{
  position:absolute;top:24px;left:50%;
  transform:translateX(-50%);
  font-family:"Cormorant",Georgia,serif;
  font-size:14px;
  font-weight:600;
  color:var(--на-светлом-тихое);
  line-height:1;
}

/* Место, где пропусков два и больше подряд. Показывается только
   в разборе пропусков: там надо видеть, где именно рвалась цепочка,
   а не только прочитать даты в карточках ниже. */
.день[data-провал] i{
  background:transparent;
  box-shadow:0 0 0 2px rgba(232,238,246,.42);
}

/* Отметка сегодняшнего дня: точка загорается и волна расходится */
.день[data-только-что] i{animation:загорелась .9s ease-out}
@keyframes загорелась{
  from{box-shadow:0 0 0 0 rgba(201,162,74,.8)}
  to{box-shadow:0 0 0 20px rgba(201,162,74,0)}
}
@media (prefers-reduced-motion:reduce){.день[data-только-что] i{animation:none}}

/* --- ПОЛОСКА на вкладке «Я»: сколько дней отмечено. Вся лента из
   66 точек живёт на вкладке «Трекер», здесь только доля. --- */
.полоска{margin:18px 0 24px}
.полоска-жёлоб{
  height:5px;
  background:rgba(59,44,16,.14);
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(59,44,16,.16);
}
.полоска-жёлоб i{
  display:block;
  height:100%;
  min-width:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#A8801F,#D8B45F 60%,#F7E7BC);
  box-shadow:0 0 8px rgba(201,162,74,.5);
  transition:width .5s var(--плавно);
}
.полоска p{margin:8px 0 0}

/* --- СЧЁТЫ на вкладке «Трекер»: три числа в ряд --- */
.счёты{
  display:flex;
  gap:8px;
  margin:26px 0 20px;
}
.счёт{flex:1 1 0;padding:16px 10px;text-align:center}
.счёт .метка{font-size:14px;letter-spacing:.1em;margin-bottom:8px;color:var(--на-светлом-тихое)}
.счёт-число{
  font-family:"Cormorant",Georgia,serif;
  font-size:26px;
  font-weight:600;
  color:var(--на-светлом);
  margin:0;
  line-height:1.1;
}

/* --- ЖЕЛАНИЯ --- */
.крупное{
  font-family:"Cormorant",Georgia,serif;
  font-size:24px;
  line-height:1.35;
  font-weight:700;
  margin-bottom:8px;
}
.карточка-желание{border-left:3px solid var(--награда)}
.экран .метка{margin-bottom:10px;display:block}

/* --- ЗАПИСИ: «о себе» в дневнике и поля в разделах --- */
.проводник{margin-bottom:20px}
.заметка,.запись{margin-bottom:20px}
.заметка textarea,.запись textarea{margin-top:8px}
/* Подпись над полем: не метка в разрядку, а обычная строка —
   подписей много подряд, и прописные утомляют */
.подпись-поля{
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--подпись);
  margin:0 0 4px;
}
/* Отмеченный день помечен золотой чертой слева */
.запись.отмечен{border-left:2px solid var(--награда);padding-left:12px}
.заметка .подпись-поля,.запись .подпись-поля{color:var(--подпись)}
/* Название итога, который выпал по тесту: короткая золотая строка
   над тем, что человек дописал своими словами */
.ярлык{
  display:inline-block;
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--на-светлом);
  background:rgba(78,58,14,.07);
  border:1px solid var(--нить-светлая);
  border-radius:999px;
  padding:5px 12px;
  margin:0 0 4px;
}


/* --- КРУПНЫЕ КНОПКИ на главной. Это главная навигация: не строчки
   со ссылками, а страницы, которые берут в руки. Каждая — тот же
   пергамент с золочёным обрезом, что и карточки: одна вещь,
   а не набор разных.

   При открытии главной они встают лесенкой, по одной, с задержкой
   в 55 мс. Один поставленный момент вместо россыпи мелких
   движений по всему приложению. --- */
.кнопки{display:flex;flex-direction:column;gap:12px;margin-top:26px}

.крупная{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:84px;
  text-align:left;
  padding:18px 18px 18px 25px;
  border:1px solid var(--лист-край);
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень);
  cursor:pointer;
  color:var(--на-светлом);
  transition:transform .2s var(--плавно), background .2s var(--плавно);
}
.крупная:active{transform:scale(.988);background:var(--лист-нажат)}

/* Значок в золотом круге. Один цвет на все разделы: раздел
   узнаётся по рисунку, а шесть цветов на экране — конфетти. */
.крупная-значок{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%,
    rgba(247,231,188,.85) 0%, rgba(201,162,74,.22) 60%, rgba(201,162,74,.13) 100%);
  box-shadow:inset 0 0 0 1px rgba(201,162,74,.42),
             inset 0 1px 0 rgba(255,250,235,.7);
  color:var(--награда-глубже);
}
.крупная-значок svg{width:23px;height:23px}

.крупная-текст{flex:1 1 auto;min-width:0}
.крупная-текст b{
  display:block;
  font-family:"Cormorant",Georgia,serif;
  font-size:24px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.004em;
}
.крупная-текст i{
  display:block;
  font-style:normal;
  margin-top:4px;
  font-size:14px;
  line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.крупная-стрелка{flex:0 0 auto;color:var(--на-светлом-тихое);display:flex;opacity:.65}
.крупная-стрелка svg{width:19px;height:19px}

/* Непрочитанная весть 21-го или 66-го дня: золотая точка у значка */
.крупная[data-весть] .крупная-значок::after{
  content:"";
  position:absolute;
  margin:-34px 0 0 34px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--награда);
  box-shadow:0 0 0 2px var(--лист-плотный), 0 0 10px rgba(201,162,74,.8);
}
.крупная-значок{position:relative}

/* Лесенка при открытии главной */
[data-видно] .кнопки .крупная{animation:встаёт .46s var(--плавно) both}
.кнопки .крупная:nth-child(1){animation-delay:.04s}
.кнопки .крупная:nth-child(2){animation-delay:.095s}
.кнопки .крупная:nth-child(3){animation-delay:.15s}
.кнопки .крупная:nth-child(4){animation-delay:.205s}
.кнопки .крупная:nth-child(5){animation-delay:.26s}
@keyframes встаёт{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  [data-видно] .кнопки .крупная{animation:none}
}

/* Карточка сегодняшнего дня: главное на экране, поэтому крупнее прочих */
.карточка-день{padding:20px;margin:0}
.карточка-день .полоска{margin:12px 0 18px}
.карточка-день h2{margin-bottom:12px}

/* --- РАЗДЕЛ «ТЕСТЫ» --- */
.тест-строка{
  border:1px solid var(--нить-светлая);
  border-radius:var(--скругление);
  background:var(--лист);
  color:var(--на-светлом);
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--тень-мягкая);
}
.тест-строка.пройден{border-left:3px solid var(--награда-глубже)}
.тест-строка h2{font-size:20px;margin-bottom:10px}
.тест-строка .главная,.тест-строка .тихая{margin-top:14px}

/* Кнопка «Пройти заново»: тише главной, но всё же кнопка, поэтому
   с рамкой — иначе читается как подпись */
/* Тихая кнопка с рамкой лежит на светлой карточке, поэтому и цвет
   у неё тёмно-золотой, а не светлый */
.тихая-рамка{
  border:1px solid var(--нить-светлая);
  border-radius:var(--скругление-кнопки);
  background:rgba(78,58,14,.05);
  color:var(--на-светлом);
}
.тест-строка .тихая{color:var(--на-светлом)}

/* То, что человек записал своими словами — курсивом, в кавычках */
.своими-словами{
  font-style:italic;
  color:var(--на-светлом-тихое);
  margin:10px 0 0;
}

/* --- ИТОГ КРУГА -----------------------------------------------------
   Единственный экран, где приложение позволяет себе торжественность.
   Шестьдесят шесть дней доходят до конца редко, и человек должен
   увидеть это глазами, а не прочитать в строке статистики. --- */

/* Печать: золотой круг с числом, как на дипломе. Лучи вокруг —
   не картинка, а тени: так они не грузятся отдельным файлом
   и не мылятся на плотных экранах. */
.венец{text-align:center;padding:8px 0 4px}
.печать{
  position:relative;
  width:104px;height:104px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--фольга);
  background-size:180% 180%;
  color:var(--на-светлом);
  font-family:"Cormorant",Georgia,serif;
  font-size:38px;font-weight:600;line-height:1;
  box-shadow:
    0 0 0 1px rgba(242,220,164,.55),
    0 0 0 10px rgba(201,162,74,.10),
    0 0 0 22px rgba(201,162,74,.05),
    0 14px 40px -12px rgba(201,162,74,.55);
}
.печать::after{
  content:"";
  position:absolute;inset:-46px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,220,164,.20) 0%,transparent 62%);
  pointer-events:none;
}
.венец h1{margin:0 0 6px}
.венец .желание-круга{
  font-family:"Cormorant",Georgia,serif;
  font-size:20px;font-style:italic;
  color:var(--награда-ярче);
  margin:0 0 6px;
}

/* Лента в итоге — не счёт, а вид проделанного целиком. Ряды
   выравниваются по левому краю, как на «Трекере»: по центру они
   расходятся ступеньками и лента перестаёт читаться лентой. */
.дни-итог{margin:2px 0 26px}

/* Закрывающая фраза. Крупный шрифт с засечками на пергаменте,
   золотая линия сверху — так читается как надпись, а не абзац. */
.глубокая{
  position:relative;
  margin:26px 0 8px;
  padding:26px 22px 24px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
  overflow:hidden;
}
.глубокая::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--фольга);
  background-size:200% 100%;
}
.глубокая p{
  font-family:"Cormorant",Georgia,serif;
  font-size:21px;line-height:1.45;
  color:var(--на-светлом);
  margin:0 0 14px;
}
.глубокая p:last-child{margin-bottom:0}
.глубокая .подпись-круга{
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.55;
  color:var(--на-светлом-тихое);
}

/* --- СЧЁТ КАК КНОПКА. В итоге круга три числа нажимаются и
   разворачиваются в разбор. Кнопке нужен сброс своих умолчаний
   и видимый до нажатия признак, что она нажимается: стрелка
   в углу и просадка при касании. --- */
.счёт-кнопка{
  position:relative;
  display:block;
  width:100%;
  border:none;
  font:inherit;
  cursor:pointer;
  padding-bottom:22px;
  transition:transform .14s var(--плавно), box-shadow .14s var(--плавно);
}
.счёт-кнопка:active{transform:translateY(1px) scale(.985)}
.счёт-стрелка{
  position:absolute;
  left:50%;bottom:8px;
  transform:translateX(-50%) rotate(90deg);
  color:var(--награда-глубже);
  opacity:.75;
}
.счёт-стрелка svg{width:15px;height:15px;display:block}

/* --- РАЗБОР: экран за одним из трёх чисел --------------------------- */

.разбор-шапка{padding:6px 0 2px}
.разбор-число{
  font-family:"Cormorant",Georgia,serif;
  font-size:44px;
  font-weight:600;
  line-height:1.05;
  color:var(--награда-ярче);
  margin:0 0 8px;
}

/* График лучшей полосы. Столбики рисует js/экраны/разбор.js прямо
   в SVG: библиотек в приложении нет, и заводить их ради одного
   графика не за чем. */
.график{
  display:block;
  width:100%;
  height:auto;
  margin:18px 0 10px;
  overflow:visible;
}
/* Подпись под графиком: без неё низкие засечки читаются как брак
   печати, а не как пропущенные дни */
.график-подпись{
  font-size:14px;
  color:var(--тихое);
  margin:0 0 34px;
}

/* Недели: сколько дней из семи держалось. Полная неделя золотится,
   пустая гаснет — провал почти всегда садится на одну-две недели,
   и в такой разбивке это видно сразу. */
.недели{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
.неделя{
  flex:1 1 calc(50% - 8px);
  min-width:140px;
  padding:14px 14px 12px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
}
.неделя.полная{box-shadow:var(--тень-мягкая),inset 0 0 0 2px var(--награда)}
.неделя.пустая{opacity:.55}
.неделя-имя{
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--на-светлом-тихое);margin:0 0 4px;
}
.неделя-счёт{
  font-family:"Cormorant",Georgia,serif;
  font-size:24px;font-weight:600;color:var(--на-светлом);margin:0 0 2px;
}
.неделя-даты{font-size:13px;color:var(--на-светлом-тихое);margin:0}

/* Список полос: число слева крупно, даты справа */
.полосы{margin:14px 0 8px}
.полоса-строка{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;margin-bottom:8px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
}
.полоса-строка.лучшая{box-shadow:var(--тень-мягкая),inset 0 0 0 2px var(--награда)}
.полоса-длина{
  font-family:"Cormorant",Georgia,serif;
  font-size:30px;font-weight:600;line-height:1;
  color:var(--на-светлом);margin:0;min-width:38px;text-align:center;
}
.полоса-даты{margin:0;line-height:1.35}
.полоса-даты b{display:block;color:var(--на-светлом);font-size:15px}
.полоса-даты i{display:block;font-style:normal;font-size:13px;color:var(--на-светлом-тихое)}

/* Провал: два и больше пропуска подряд. Даётся крупно — это
   единственное место круга, которое рвёт цепочку. */
.провал{
  padding:18px 18px 16px;margin-bottom:10px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
}
.провал-дни{
  font-family:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--на-светлом-тихое);margin:0 0 4px;
}
.провал-даты{
  font-family:"Cormorant",Georgia,serif;
  font-size:26px;font-weight:600;line-height:1.15;
  color:var(--на-светлом);margin:0 0 4px;
}
.провал .тише{color:var(--на-светлом-тихое);margin:0}

/* --- ТРЕТИЙ УРОВЕНЬ РАЗБОРА: отрезок дней крупно ---------------------
   Неделя, полоса и пропуск разворачиваются в один и тот же список:
   строка на день, где видно число, день недели и отмечен он или нет.
   Строка крупная нарочно — на этот экран заходят разглядывать. --- */

.день-строка{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  margin-bottom:8px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
}

/* Отмеченный день — страница пергамента: он был, он есть.
   Пропущенный — пустая ячейка прямо на небе, обведённая пунктиром.
   Полупрозрачный пергамент здесь пробовался и не годится: поверх
   тёмного неба он даёт грязно-серое пятно, а не «пусто». */
.день-строка:not(.отмечен){
  background:rgba(232,238,246,.04);
  box-shadow:none;
  border:1px dashed rgba(201,162,74,.3);
  padding:15px 17px;
}
.день-строка:not(.отмечен) .день-текст b{color:var(--письмо)}
.день-строка:not(.отмечен) .день-текст i,
.день-строка:not(.отмечен) .день-ответ{color:var(--тихое)}
.день-строка:not(.отмечен) .день-точка{
  box-shadow:inset 0 0 0 2px rgba(201,162,74,.45);
}

.день-точка{
  flex:0 0 auto;
  width:20px;height:20px;
  border-radius:50%;
  background:transparent;
}
.день-строка.отмечен .день-точка{
  background:linear-gradient(160deg,#F7E7BC 0%,#D8B45F 45%,#A8801F 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.9), 0 1px 3px rgba(90,64,10,.45);
}

.день-текст{flex:1 1 auto;min-width:0;line-height:1.3}
.день-текст b{
  display:block;
  font-family:"Cormorant",Georgia,serif;
  font-size:22px;font-weight:600;
  color:var(--на-светлом);
}
.день-текст i{
  display:block;font-style:normal;font-size:13px;
  color:var(--на-светлом-тихое);
}
.день-ответ{
  flex:0 0 auto;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--на-светлом-тихое);
}
.день-строка.отмечен .день-ответ{color:var(--награда-глубже)}

/* Строки второго уровня стали кнопками: сброс умолчаний и место
   под стрелку справа */
.неделя,.полоса-строка,.провал{
  position:relative;
  border:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
  padding-right:38px;
  transition:transform .14s var(--плавно);
}
.неделя:active,.полоса-строка:active,.провал:active{transform:scale(.985)}
.неделя .счёт-стрелка,
.полоса-строка .счёт-стрелка,
.провал .счёт-стрелка{
  left:auto;right:14px;
  bottom:auto;top:50%;
  transform:translateY(-50%);
}

/* --- ОДИН ДЕНЬ ЦЕЛИКОМ ----------------------------------------------
   Открывается нажатием на точку ленты. Дата крупно, потому что
   именно за ней сюда и заходят: «а что было четырнадцатого». --- */

.один-шапка{
  padding:22px 20px 18px;
  border-radius:var(--скругление);
  background:var(--лист);
  box-shadow:var(--тень-мягкая);
  margin-bottom:16px;
}
/* День без отметки — пустая ячейка на небе, как в списке дней */
.один-шапка:not(.отмечен){
  background:rgba(232,238,246,.04);
  box-shadow:none;
  border:1px dashed rgba(201,162,74,.3);
}
.один-дата{
  font-family:"Cormorant",Georgia,serif;
  font-size:34px;font-weight:600;line-height:1.1;
  color:var(--на-светлом);
  margin:0 0 4px;
}
.один-шапка:not(.отмечен) .один-дата{color:var(--письмо)}
.один-шапка:not(.отмечен) .тише{color:var(--тихое)}
.один-состояние{
  margin:10px 0 0;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--на-светлом-тихое);
}
.один-шапка.отмечен .один-состояние{color:var(--награда-глубже)}
.один-шапка:not(.отмечен) .один-состояние{color:var(--тихое)}
.один-шапка.впереди{opacity:.75}

/* Точка ленты, которую можно нажать: увеличенная область касания,
   чтобы пальцем попадать в кружок диаметром одиннадцать точек */
.день[data-нажимается]{cursor:pointer}
.день[data-нажимается]::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
}
.день[data-нажимается]:active i{transform:scale(.86)}
.день i{transition:transform .12s var(--плавно)}

/* Отрезок, о котором идёт речь на этом экране. Одного кольца мало:
   на золотых точках оно теряется, поэтому ещё и свечение. */
.день[data-вэтом] i{
  box-shadow:0 0 0 2px var(--награда-ярче),
             0 0 12px rgba(242,220,164,.65),
             inset 0 1px 0 rgba(255,250,235,.9);
}

/* Строка дня стала кнопкой: место под стрелку справа */
.день-строка{
  position:relative;
  width:100%;
  border:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
  padding-right:38px;
}
.день-строка .счёт-стрелка{
  left:auto;right:14px;
  bottom:auto;top:50%;
  transform:translateY(-50%);
}
.день-строка:active{transform:scale(.99)}