/* КАРКАС: шапка сверху и таб-бар снизу — то, что делает страницу
   приложением, а не текстом на экране.

   Шапка держится сверху при прокрутке, таб-бар прибит к низу.
   Оба видны только после того, как человек прошёл тесты и дошёл
   до дня: во время приветствия и тестов путь прямой, уходить с него
   некуда, и панели только мешали бы. */

/* Таб-бар светлый, как и всё остальное поверх неба: тёмная панель
   спорила бы со звёздами. Значки золотые, выбранный — своим тоном. */
:root{
  --таб-фон:rgba(247,239,224,.94);
  --таб-граница:rgba(59,44,16,.14);
  --таб-тихое:rgba(59,44,16,.42);
  --высота-таба:70px;
  --высота-шапки:56px;
}
/* --- ШАПКА --- */
.шапка{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:6px;
  height:calc(var(--высота-шапки) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 0 0;
  /* Полупрозрачное стекло: под шапкой видно, что текст продолжается */
  /* Шапка не плашка, а дымка: небо под ней должно оставаться небом.
     Снизу золотой волосок, гаснущий к обоим краям, — та же позолота,
     что на обрезе страниц. */
  background:linear-gradient(180deg,
    rgba(6,11,20,.86) 0%, rgba(6,11,20,.52) 70%, transparent 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:none;
}
.шапка::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(201,162,74,.42) 22%,
    rgba(201,162,74,.42) 78%, transparent 100%);
}
/* Внутри Telegram свою шапку не рисуем на всю высоту выреза:
   верхнюю зону занимает шапка самого Telegram */
[data-внутри-телеграма] .шапка{padding-top:0;height:var(--высота-шапки)}

/* Поля те же, что у содержимого в css/оболочка.css. Из-за этого
   название начинается ровно там же, где начинаются кнопки под ним,
   а значок справа кончается ровно там, где кончаются они. */
.шапка-нутро{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding-left:max(var(--поле), env(safe-area-inset-left));
  padding-right:max(var(--поле), env(safe-area-inset-right));
}

/* Стрелка «назад». Внутри Telegram её роль играет системная стрелка
   в шапке самого Telegram, поэтому там эта кнопка спрятана. */
.назад{
  flex:0 0 auto;
  margin-left:-11px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--награда-ярче);
  border-radius:50%;
  transition:background .12s var(--плавно), transform .12s var(--плавно);
}
.назад:active{background:var(--лист);transform:scale(.92)}
.назад svg{width:22px;height:22px}

/* Название экрана. Когда стрелки нет, отступ слева её заменяет —
   иначе название прыгает при появлении стрелки. */
/* Название начинается вровень с кнопками под ним — от того же поля.
   Размер сжимается на узких телефонах: «Нейробиология желаемого»
   в 17px на экране 320px не помещается, а обрывать название точками
   незачем. Ниже 15px не опускаем, это предел читаемости. */
.шапка-имя{
  flex:1 1 auto;
  min-width:0;
  font-family:"PT Sans",Helvetica,Arial,sans-serif;
  font-size:clamp(15px, 4.3vw, 17px);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--письмо);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Справа в шапке стоит либо значок раздела, либо счёт дней.
   Значок — на всех разделах: в шапке повторяется тот же знак,
   что на кнопке, которой сюда пришли. Цифры оставлены только
   трекеру: там они и есть содержание раздела. */
.шапка-счёт{
  flex:0 0 auto;
  margin-left:auto;
  font-family:"PT Sans",Helvetica,Arial,sans-serif;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--тихое);
}
.шапка-счёт b{color:var(--награда);font-weight:700}

/* Когда справа стоит значок, а не цифры, место под него оформляется
   как у крупных кнопок: та же синяя подложка, тот же цвет */
.шапка-счёт[data-значок]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  margin-right:-4px;
  /* Значок в шапке лежит на небе, а не на пергаменте: здесь золото
     светлое, глубокое на тёмном пропадает */
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%,
    rgba(247,231,188,.30) 0%, rgba(201,162,74,.12) 70%);
  box-shadow:0 0 0 1px rgba(239,220,164,.32) inset;
  color:var(--награда-ярче);
}
.шапка-счёт[data-значок] svg{width:20px;height:20px;display:block}

/* --- ТАБ-БАР --- */
.таб-бар{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:flex;
  background:var(--таб-фон);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--таб-граница);
  padding-bottom:env(safe-area-inset-bottom);
  /* Тень вверх отделяет панель от текста, который под неё уезжает */
  box-shadow:0 -10px 30px -12px rgba(3,7,14,.75),
             0 -.5px 0 rgba(201,162,74,.22);
}
.таб-бар-нутро{
  display:flex;
  width:100%;
  max-width:430px;
  margin:0 auto;
}

.вкладка{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:var(--высота-таба);
  padding:8px 2px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--таб-тихое);
  font-family:"PT Sans",Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:color .16s var(--плавно), transform .12s var(--плавно);
}
.вкладка:active{transform:scale(.94)}
.вкладка svg{
  width:23px;height:23px;
  display:block;
  transition:transform .16s var(--плавно);
}
/* Выбранная вкладка загорается своим оттенком, невыбранные тихие:
   пять цветов разом внизу экрана были бы рябью */
.вкладка[data-выбрана]{color:var(--награда-глубже)}
/* Под выбранной вкладкой мягкое золотое свечение: точка сверху
   говорит «вы здесь» на просвет, а ореол — на солнце */
.вкладка[data-выбрана]::after{
  content:"";
  position:absolute;
  inset:6px 10px;
  border-radius:16px;
  background:radial-gradient(70% 70% at 50% 45%,
    rgba(201,162,74,.20) 0%, transparent 100%);
  z-index:-1;
}
.вкладка[data-выбрана] svg{transform:translateY(-1px) scale(1.06)}

/* Точка над выбранной вкладкой — вторая примета выбора, кроме цвета:
   на солнце разницу в цвете видно хуже, чем появление точки */
.вкладка::before{
  content:"";
  position:absolute;
  margin-top:-14px;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--награда-глубже);
  opacity:0;
  transition:opacity .16s var(--плавно);
}
.вкладка[data-выбрана]::before{opacity:1}

/* Метка «есть непрочитанное» на вкладке — золотая точка у значка */
.вкладка[data-весть] .значок::after{
  content:"";
  position:absolute;
  top:6px;right:calc(50% - 16px);
  width:7px;height:7px;
  border-radius:50%;
  background:var(--награда);
  box-shadow:0 0 0 2px var(--лист-плотный);
}
.значок{position:relative;display:block}