/* Экран «Сегодня». Владелец: таск 29.

   Своей палитры здесь нет ни одной: все цвета — токены из styles.css. Полоса
   дневной нормы — единственное место экрана с обратной раскладкой (светлый текст
   на --sage-deep), поэтому внутри неё цвет наследуется, а не назначается заново:
   иначе пришлось бы переопределять цвет общих классов, а этого экраны не делают.

   Раскладка держится на двух сетках: карточка следующего приёма пищи и фотография
   рядом с ней; ниже — три колонки «фотография вечера / остальное сегодня / вечером».
   Обе собраны на auto-fit, поэтому у ЯКОРЯ 900 и на 393 px они складываются в колонку
   сами, без третьей контрольной точки. */

.today {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ------------------------------ шапка ------------------------------ */

.today-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.today-head-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.today-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.today-summary {
  margin: 0;
  max-width: 62ch;
  color: var(--ink);
}

.today-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.today-note-line {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.today-empty,
.today-closed { gap: 8px; }

.today-empty .card-title,
.today-closed .card-title { margin-bottom: 2px; }

.today-empty .button { margin-top: 4px; }

.today-button-icon {
  display: inline-flex;
  align-items: center;
}

/* ------------------ карточка следующего приёма пищи ------------------ */

/* Карточка шире фотографии в полтора раза — так нарисован макет: читают карточку,
   а фотография отвечает на «то ли это, что я думаю». */
.today-next {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: stretch;
}

/* ЯКОРЬ 900 — та же граница, на которой сайдбар становится таб-баром (styles.css).
   Своей границы экран не заводит. */
@media (max-width: 900px) {
  .today-next { grid-template-columns: minmax(0, 1fr); }
}

/* Полоса слева — единственная роль акцента на этом экране: высокий риск.
   Средний и низкий несут нейтральную полосу намеренно. */
.today-card { border-left: 4px solid var(--border); }
.today-card-high { border-left-color: var(--risk); }
.today-card-medium { border-left-color: var(--ink-3); }
.today-card-low { border-left-color: var(--sage); }

.today-card-body { gap: 10px; }

.today-next-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.today-next-eyebrow { min-width: 0; }

.today-risk {
  display: inline-flex;
  gap: 5px;
}

/* Значок незакрытого: кружок иконкой плюс подпись. Список продуктов внутри
   бывает длинным, поэтому перенос строки не запрещается. */
.today-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.today-dish {
  margin: 0;
  overflow-wrap: anywhere;
}

.today-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  color: var(--ink);
}

.today-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.today-fact.is-muted { color: var(--ink-2); }

.today-nutrition,
.today-reason {
  margin: 0;
  color: var(--ink-2);
}

.today-reason { color: var(--ink); }

.today-open {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
}

/* Статус контейнера — кнопка: та же задача подготовки, что и в вечернем списке,
   и закрывать её удобнее там, где на неё смотрят. */
.today-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 10px 14px;
  font: 600 var(--fs-body)/1.3 var(--font-text);
  text-align: left;
  border: 1px solid var(--border);
  cursor: pointer;
}

.today-container.is-done { border-color: transparent; }

.today-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.today-eaten,
.today-cook {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --------------- перенесённое вторым планом (G12) --------------- */

.today-more,
.today-recipe {
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

/* display: flex здесь ставить нельзя — он снимает системный треугольник раскрытия,
   и заголовок перестаёт выглядеть раскрываемым. Высота набирается отступами. */
.today-more-summary {
  min-height: var(--tap);
  padding: 12px 0;
  font: 600 var(--fs-body)/1.3 var(--font-text);
  color: var(--ink-2);
  cursor: pointer;
}

.today-more-summary:hover { color: var(--ink); }

.today-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
  padding: 4px 0 var(--gap);
}

.today-field { gap: 6px; }

.today-hint { font-size: 12px; }

.today-target { grid-column: 1 / -1; }

.today-target-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.today-target-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.today-target-caption {
  font: 400 var(--fs-caption)/1.4 var(--font-caption);
  color: var(--ink-2);
}

/* Ведущее поле обведено потемнее: видно, по какому из заполненных идёт пересчёт. */
.today-target-input.is-lead {
  border-width: 2px;
  border-color: var(--ink);
  background: var(--surface);
}

.today-reset { align-self: flex-start; }

.today-stepper { align-self: flex-start; }

.today-target-note {
  margin: 0 0 var(--gap);
  color: var(--ink);
}

.today-ingredients,
.today-steps {
  margin: 0 0 var(--gap);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-2);
}

.today-steps { color: var(--ink); }

.today-raw-qty { color: var(--ink-2); }

.today-collapse { align-self: flex-start; }

/* --------------------------- дневная норма --------------------------- */

.today-norm {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad);
  border-radius: var(--r-lg);
  background: var(--sage-deep);
  /* Светлейший из четырнадцати: на заливке --sage-deep он даёт 7,4:1. */
  color: var(--surface);
}

@media (prefers-color-scheme: dark) {
  /* В тёмной теме --surface почти чёрный — светлым текст на зелёном не станет. */
  .today-norm { color: var(--ink); }
}

.today-norm-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Надзаголовок и заголовок полосы набраны своими классами, а не .eyebrow/.heading:
   те задают цвет чернил, а здесь цвет обязан наследоваться от заливки. */
.today-norm-eyebrow {
  margin: 0;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  opacity: .85;
}

.today-norm-title {
  margin: 0;
  font: 800 var(--fs-heading)/1.15 var(--font-display);
  letter-spacing: -.014em;
  color: inherit;
}

.today-norm-hint {
  margin: 0;
  color: inherit;
  opacity: .85;
}

.today-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
}

/* Плитка внутри полосы: обводка вместо заливки. Светлая заливка дала бы белому
   тексту 3,9:1 — ниже нормы, а тёмный текст на ней спорит с самой полосой. */
.today-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
  border: 1px solid var(--sage-2);
  border-radius: var(--r-md);
  color: inherit;
}

.today-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}

.today-tile-value {
  margin: 0;
  font: 700 var(--fs-card)/1.2 var(--font-display);
  letter-spacing: -.008em;
}

.today-tile-note {
  margin: 0;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
  opacity: .85;
}

/* Полоска долготы нормы нужна на телефоне вместо второй строки цифр —
   на ноутбуке макет обходится числами (ЯКОРЬ 600 ниже её и показывает). */
.today-bar { display: none; }

.today-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--sage-2);
  overflow-x: auto;
  white-space: nowrap;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}

.today-strip-dash { opacity: .6; }

.today-strip-item.is-eaten {
  text-decoration: line-through;
  opacity: .7;
}

/* --------------------- остальное сегодня и вечер --------------------- */

.today-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-lg);
  align-items: start;
}

.today-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.today-rest-body { gap: 8px; }

.today-rest-head { color: var(--ink-2); }

.today-rest-name { overflow-wrap: anywhere; }

/* Съеденное не гасится прозрачностью — она снимает контраст. Зачёркнуто название,
   и этого хватает: чип рядом всё равно говорит словом. */
.today-rest.is-eaten .today-rest-name {
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
}

.today-rest-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.today-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Подпись второй пачки дел — та же строчная шапка, что у колонки, но с отбивкой:
   без неё она липнет к последней задаче и читается как её продолжение. */
.today-tasks-caption { margin-top: 4px; }

.today-task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  min-height: var(--tap);
  cursor: pointer;
}

.today-task-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.today-task-title { color: var(--ink); }

.today-task-detail { font-size: 13px; }

.today-task-min {
  color: var(--ink-2);
  white-space: nowrap;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
}

.today-task.is-done .today-task-title {
  text-decoration: line-through;
  color: var(--ink-2);
}

.today-all-prep { align-self: flex-start; }

/* ------------------------------ фотография ------------------------------ */

.today-photo {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 200px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}

.today-next-photo { min-height: 220px; }

.today-evening-photo { aspect-ratio: 4 / 3; }

.today-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Плашка вместо фотографии: и когда её нет вовсе, и когда она не доехала
   из кэша (История 163). Отличается подписью, а не видом. */
.today-mist {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 0;
}

.today-mist-kcal {
  margin: 0;
  font: 800 var(--fs-heading)/1.1 var(--font-display);
  letter-spacing: -.014em;
}

.today-mist-note {
  margin: 0;
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
}

.today-photo-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font: 600 13px/1.2 var(--font-text);
}

/* ============================ ЯКОРЬ 600 ============================
   Телефон. Границы своей экран не заводит: 600 px — та же граница, что
   в styles.css и в недельной сетке. */

@media (max-width: 600px) {
  .today-head-aside {
    align-items: flex-start;
    width: 100%;
  }

  .today-next { gap: var(--gap); }

  /* Фотография в карточке следующего приёма пищи на телефоне не помещается:
     в макете 20-iphone её нет, а карточка занимает экран целиком. */
  .today-next-photo { display: none; }

  .today-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .today-tile-value { font-size: var(--fs-card); }

  /* Вместо второй строки цифр — полоска: на 393 px она читается быстрее. */
  .today-bar {
    display: block;
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--sage-2);
    overflow: hidden;
  }

  .today-bar-fill {
    display: block;
    height: 100%;
    background: currentColor;
  }

  /* Лента расписания на телефоне уезжает под палец и ничего не добавляет:
     те же приёмы пищи стоят карточками ниже. */
  .today-strip { display: none; }

  .today-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Зона нажатия от 44 px: у чипов общий класс держит 34, а это переключатели. */
  .today-eaten,
  .today-cook { min-height: var(--tap); }

  .today-actions .button { width: 100%; }

  .today-actions .today-eaten { width: 100%; }
}