/* ═══════════════════════════════════════════════════════
   today.css — стили экрана «Сегодня»
   Типографика: единая система v3 (tokens.css)
   Подключается ПОСЛЕ styles.css, переопределяет нужное
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   ГЛОБАЛЬНЫЙ ШРИФТ — Manrope
   ══════════════════════════════════════════ */
html {
  min-height: calc(100% + env(safe-area-inset-top));
  background: var(--bg-home);
  overflow: hidden;
  height: 100%;
}
body {
  overflow: hidden;
  height: 100%;
}
body, html {
  font-family: var(--font) !important;
}
.main-scroll {
  overscroll-behavior: none;
}

/* ══════════════════════════════════════════
   ФОН — оригинальный Figma (Today)
   ══════════════════════════════════════════ */
.app-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #0D0D0D;
  overflow: hidden;
}
.app-bg .e1, .app-bg .e2 {
  display: block;
  position: absolute;
  border-radius: 50%;
  background: rgba(204, 204, 204, 0.10);
  filter: blur(75px);
  pointer-events: none;
}
.app-bg .e1 {
  width: 372px; height: 293px;
  left: 99px; top: -176px;
  transform: matrix(-0.95,-0.31,0.21,-0.98,0,0);
}
.app-bg .e2 {
  width: 516px; height: 319px;
  left: -140px; top: 835px;
  transform: matrix(0.98,0.22,-0.11,0.99,0,0);
}

/* ══════════════════════════════════════════
   ЗАГОЛОВКИ КАРТОЧЕК
   ══════════════════════════════════════════ */
.today-card-title {
  font-size: var(--fs-24-semibold);
  font-weight: var(--fw-24-semibold);
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.today-card-number {
  font-size: var(--fs-24-bold);
  font-weight: var(--fw-24-bold);
  color: var(--training);
  line-height: 1;
}

/* Мета-подписи карточек */
.today-card-meta {
  font-size: var(--fs-12-regular);
  color: var(--text3);
  line-height: 1.3;
}

/* Калории — крупное число */
.today-kcal-big {
  font-size: var(--fs-24-bold);
  font-weight: var(--fw-24-bold);
  color: var(--text);
  letter-spacing: -0.3px;
}

/* Следующий приём — название блюда */
.next-meal-name {
  font-size: var(--fs-14-regular);
  font-weight: var(--fw-14-regular);
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Следующий приём — время (чипс) */
.next-meal-time {
  font-size: var(--fs-10-regular);
  font-weight: 600;
  color: var(--nutrition);
  background: rgba(204, 85, 0, 0.12);
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
}

/* Вода — метка внутри кольца */
.water-label {
  font-size: var(--fs-22-regular);
  font-weight: var(--fw-22-regular);
  color: var(--text);
}

/* Вода — подпись "из 2.5 л" */
.water-sub {
  font-size: var(--fs-10-regular);
  color: var(--text3);
}

/* ══════════════════════════════════════════
   ХЕДЕР
   ══════════════════════════════════════════ */
.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(70px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 30px 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  position: relative;
  z-index: 20;
}
.hdr-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  min-width: 100px;
}
.hdr-wd {
  font-size: var(--fs-14-regular);
  font-weight: var(--fw-14-regular);
  color: var(--c-header-meta);
  line-height: var(--lh-20);
  text-transform: capitalize;
}
.hdr-date-btn {
  font-size: var(--fs-22-regular);
  font-weight: var(--fw-22-regular);
  color: var(--c-header);
  line-height: var(--lh-30);
  letter-spacing: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}
.hdr-logo {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 0px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.25));
}
.hdr-logo img {
  width: 60px; height: 60px;
  object-fit: contain;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  justify-content: flex-end;
}
.hdr-right-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.hdr-greet {
  font-size: var(--fs-14-regular);
  font-weight: var(--fw-14-regular);
  color: var(--c-header-meta);
  line-height: var(--lh-20);
}
.hdr-name {
  font-size: var(--fs-22-regular);
  font-weight: var(--fw-22-regular);
  color: var(--c-header);
  line-height: var(--lh-30);
  letter-spacing: -0.3px;
}
.hdr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14-regular);
  font-weight: 700;
  color: #fff;
  font-family: var(--font);
  flex-shrink: 0;
  overflow: hidden;
}
.hdr-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hdr-time, .live-dot, .app-header .icon-btn {
  display: none;
}

/* ══════════════════════════════════════════
   ЧИПСЫ МЫШЦ
   ══════════════════════════════════════════ */
.mtag {
  display: inline-flex;
  align-items: center;
  background: var(--chip-bg);
  color: var(--text3);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--chip-py) var(--chip-px);
  font-size: var(--fs-10-regular);
  font-weight: var(--fw-10-regular);
  line-height: var(--lh-14);
  font-family: var(--font);
}

/* ══════════════════════════════════════════
   СОВЕТЫ
   ══════════════════════════════════════════ */
/* Советы (новый дизайн) */
.tips-block {
  background: var(--card-bg);
  border-radius: var(--card-r);
  padding: 20px 18px;
  margin-bottom: var(--card-gap);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.tip-dot--training { background: var(--training); }
.tip-dot--sleep     { background: var(--sleep); }
.tip-dot--nutrition { background: var(--nutrition); }
.tip-dot--water     { background: var(--water); }

.tip-text {
  font-size: var(--fs-14-regular);
  font-weight: var(--fw-14-regular);
  line-height: 19px;
  color: var(--text);
}

/* ══════════════════════════════════════════
   GLASS OVERLAY
   ══════════════════════════════════════════ */
.glass-top-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 210px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.2);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  z-index: 15;
  pointer-events: none;
  transition: height 0.3s ease;
}

/* ══════════════════════════════════════════
   НЕДЕЛЬНЫЙ БАР
   ══════════════════════════════════════════ */
.week-strip {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 16px 8px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  outline: none;
  height: auto;
  position: relative;
  z-index: 20;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}
.dp {
  flex: 1 1 0;
  width: auto;
  height: 60px;
  border-radius: 10px;
  border: none;
  background: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.dp.cur {
  background: rgba(102, 102, 102, 0.20);
  border: none;
}
.dp.gym, .dp.shift-day {
  background: transparent;
  border: none;
}
.dp .dn {
  font-size: var(--fs-12-regular);
  font-weight: var(--fw-12-regular);
  line-height: 1;
  text-transform: lowercase;
  margin-bottom: 2px;
}
.dp .dd {
  font-size: var(--fs-22-light);
  font-weight: var(--fw-22-light);
  color: var(--c-day-num);
  line-height: 1;
  margin: 0;
}
.dp-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  top: 4px; right: 6px;
  margin: 0;
}
.dp-done-dot { display: none; }

/* ══════════════════════════════════════════
   ОТСТУПЫ И КАРТОЧКИ
   ══════════════════════════════════════════ */
#screen-today .card {
  background: var(--card-bg);
  border: none;
  border-radius: var(--card-r);
  margin-bottom: var(--card-gap);
}

/* ══════════════════════════════════════════
   NOISE
   ══════════════════════════════════════════ */
.noise-bg {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
.noise-glass {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 175px;
  z-index: 16;
  pointer-events: none;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  transition: height 0.3s ease;
}
.glass-bottom-overlay { display: none; }
.noise-glass-bottom { display: none; }

/* ══════════════════════════════════════════
   SLEEP DRUM-ROLL PICKER
   ══════════════════════════════════════════ */
.sl-ps {
  height: 115px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: calc((115px - 42px) / 2) 0;
}
.sl-ps::-webkit-scrollbar { display: none; }
.sl-pi {
  height: 42px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.22;
  transform: scale(0.78);
  transition: opacity 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* % в кольце калорий */
.kcal-ring-pct {
  font-size: var(--fs-22-regular);
  font-weight: var(--fw-22-regular);
  color: var(--text);
}