/* Стили экрана «Неделя». Владелец: таск 30, итерация 6.

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

   Масштаб сетки живёт здесь и только здесь: --hour-height. JS переводит минуты
   в доли часа и подставляет их в calc(), поэтому поменять плотность календаря
   можно одной строкой ниже и ни одной в JS. */

#week-root {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);

  /* 72 px дают даже короткому завтраку две читаемые строки: слот с временем и блюдо. */
  --hour-height: 72px;
  --week-time-col: 56px;
}

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

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

.week-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.week-head-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.week-range,
.week-sub {
  margin: 0;
  color: var(--ink-2);
}

.week-year { margin: 0; }

.week-replace-label { white-space: nowrap; }

/* ---------------------------- пустое состояние ---------------------------- */

.week-empty-actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* ------------------------------ полоса состояния -------------------------- */

.week-status {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  flex-wrap: wrap;
  padding: 12px var(--gap-lg);
}

/* На телефоне полоса перестаёт быть карточкой: там от неё остаётся легенда тегов,
   а счёт собранного уже стоит строкой под заголовком. */
.week-status.is-day {
  padding: 0;
  gap: var(--gap);
}

.week-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
}

.week-progress-line { margin: 0; }

.week-progress-count { color: var(--ink-2); }

.week-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.week-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sage-deep);
}

@media (prefers-color-scheme: dark) {
  /* На тёмном листе --sage-deep почти сливается с дорожкой. */
  .week-bar-fill { background: var(--sage); }
}

/* --------------------------------- теги ----------------------------------- */

.week-tags {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  min-width: 0;
}

.week-tags-title { flex: 0 0 auto; }

.week-tags-hint { margin-left: auto; }

.week-tag-list {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.week-tag-label { color: var(--ink-2); }

.week-tag-kill {
  min-height: 0;
  padding: 4px;
  color: var(--ink-3);
}

/* Метка тега. Три цвета, и ни один не красный: красное на этом экране значит
   «высокий риск сорвать приём пищи». Уровни различаются так же, как в макете:
   вне дома — чернила, работа — зелень, дом — третья ступень серого. */
.week-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: var(--border);
}

.week-dot-high { background: var(--ink); }
.week-dot-medium { background: var(--sage); }
.week-dot-low { background: var(--ink-3); }

/* ---------------------------- «Ещё тег» ----------------------------------- */

.week-add { min-width: 0; }

.week-add-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.week-add-summary::-webkit-details-marker { display: none; }
.week-add-summary:hover { color: var(--ink); background: var(--surface-2); }

.week-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Поля берут вид и размер из styles.css целиком: у них нет ничего, что здесь
   отличалось бы по существу, а свой min-height отобрал бы у них 44 px на телефоне. */
.week-field { flex: 1 1 150px; }

/* --------------------------- «не разобрано» -------------------------------- */

.week-unparsed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
}

.week-unparsed-mark {
  display: inline-flex;
  color: var(--ink-2);
}

.week-unparsed-show { min-height: 32px; padding: 4px 10px; }

.week-notice { margin: 0; }

/* ------------------------------ полоса дней -------------------------------- */

/* Полоса есть только в режиме «день»: JS её строит, а не CSS прячет — семи колонок
   на телефоне попросту не создаётся. */
.week-days {
  display: flex;
  min-width: 0;
}

.week-days-strip {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 2px;
}

.week-days-strip::-webkit-scrollbar { display: none; }

.week-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 0 auto;
  min-width: 52px;
  min-height: var(--tap);
  padding: 8px 10px;
  font: inherit;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}

/* Выбранный день — заливка «главного действия»: акцент остаётся за риском. */
.week-day-chip.is-active {
  color: var(--surface);
  background: var(--sage-deep);
  border-color: var(--sage-deep);
}

@media (prefers-color-scheme: dark) {
  .week-day-chip.is-active { color: var(--ink); }
}

.week-day-chip-name {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.week-day-chip-date {
  font: 700 var(--fs-card)/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.week-dots {
  display: inline-flex;
  gap: 3px;
}

.week-dots-one {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
}

.week-dots-one.is-on { opacity: 1; }

/* --------------------------------- карточка сетки --------------------------- */

.week-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.week-card-head { align-items: baseline; }

.week-card-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.week-day-count {
  white-space: nowrap;
  color: var(--ink-2);
}

/* Прокрутка на этом контейнере — от неё зависят обе липкости: шапка дней
   держится сверху, колонка времени — слева. */
.week-cal {
  overflow: auto;
  max-height: min(72vh, 720px);
  background: var(--surface);
}

/* Колонки задаёт JS инлайном: их число известно только по числу дней. */
.week-cal-grid {
  display: grid;
  grid-auto-rows: min-content;
  min-width: min-content;
  background: var(--surface);
}

.week-corner,
.week-day-head {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.week-corner {
  left: 0;
  z-index: 30;
  border-right: 1px solid var(--border);
}

.week-day-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--border);
  min-width: 0;
}

.week-day-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.week-day-name {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.week-day-date {
  font-weight: 600;
  color: var(--ink);
}

.week-day-warning {
  margin: 0;
  line-height: 1.3;
}

/* Линейка часов. Подпись стоит на своей линии, поэтому позиционирована абсолютно. */
.week-gutter {
  position: sticky;
  left: 0;
  z-index: 24;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.week-gutter-hour {
  position: absolute;
  right: 8px;
  transform: translateY(-6px);
  font: 400 var(--fs-caption)/1 var(--font-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Колонка дня. Часовые линии — фоном: отдельных div-делителей на каждый час
   было бы по семь штук на день, а рисуют они ровно одну линию. */
.week-col {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent var(--hour-height)
  );
}

/* --------------------------------- события --------------------------------- */

/* Позиция и высота приходят инлайном из минут. Карточка не получает минимальную
   высоту: иначе короткий интервал визуально налезает на следующий. */
.week-event,
.week-meal {
  position: absolute;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.week-event {
  background: var(--surface-2);
  border-left: 3px solid var(--border);
}

/* Нажимаемая часть блока — настоящая кнопка: так фокус, клавиатура и читалка
   достаются даром, а не собираются из tabindex и обработчиков. */
.week-event-open,
.week-meal-open {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px 6px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
}

.week-event-time {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}

.week-event-title {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
}

.week-event-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  min-width: 0;
}

.week-event-tag-label {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Раскрытый блок перерастает свою длительность и ложится поверх соседей: иначе
   выбор тега и удаление в него не поместятся. Ширину он тоже берёт свою —
   в дорожку шириной в треть колонки не влезет ни один чип. */
.week-event.is-open,
.week-meal.is-open {
  height: auto !important;
  z-index: 20;
  overflow: visible;
  background: var(--surface);
  border: 1px solid var(--ink-3);
  box-shadow: var(--shadow);
}

.week-event.is-open {
  left: 0 !important;
  width: min(260px, 78vw) !important;
  border-left-width: 3px;
}

/* Цвет левой полосы — уровень риска тега, тот же язык, что у точек в легенде.
   Правила стоят после раскрытия намеренно: рамка раскрытого блока перебила бы
   их при равной специфичности, и раскрытая карточка теряла бы метку тега. */
.week-event.is-high { border-left-color: var(--ink); }
.week-event.is-medium { border-left-color: var(--sage); }
.week-event.is-low { border-left-color: var(--ink-3); }

.week-meal.is-open {
  left: auto !important;
  right: 0;
  width: min(260px, 78vw) !important;
}

.week-event-panel,
.week-meal-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
}

.week-panel-title { margin: 0; }

.week-panel-hint { margin: 0; line-height: 1.35; }

.week-tag-choice {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.week-panel-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Кнопки раскрытой панели мельче обычных: место в блоке сетки считанное.
   Селектор нарочно одноклассовый — правило .button.button из styles.css сильнее
   и на телефоне вернёт им 44 px, как и положено мишени под палец. */
.week-collapse,
.week-event-kill {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
}

/* ------------------------------ приёмы пищи ------------------------------ */

.week-meal {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Ручка отдельна от кнопки раскрытия: только она начинает перенос, поэтому
   обычный клик по карточке и прокрутка шкалы не превращаются в drag. */
.week-meal-drag {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  padding: 2px 5px;
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: grab;
  touch-action: none;
}

.week-meal-drag:active,
.week-meal.is-dragging .week-meal-drag { cursor: grabbing; }

.week-meal.is-dragging { z-index: 21; box-shadow: var(--shadow); }

/* Подсказка берётся из data-атрибута, который живёт только во время жеста. */
.week-meal.is-dragging::after {
  content: attr(data-preview-time);
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: var(--r-sm);
  color: var(--surface);
  background: var(--ink);
  font: 400 var(--fs-caption)/1 var(--font-caption);
  font-variant-numeric: tabular-nums;
}

/* Собранный приём пищи — зелёная плашка, несобранный остаётся белым: в макете
   этим и отличается «сделано» от «ещё нет», без единого лишнего слова. */
.week-meal.is-set {
  background: var(--sage-soft);
  border-color: transparent;
}

/* Единственное красное на экране: высокий риск и день, в котором окна не нашлось. */
.week-meal.is-alarm {
  background: var(--risk-soft);
  border-color: var(--risk);
}

.week-meal-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.week-meal-sign,
.week-meal-eaten {
  display: inline-flex;
  flex: 0 0 auto;
}

.week-meal-sign { color: var(--risk); }
.week-meal-eaten { color: var(--sage); }

.week-meal-slot {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-meal-dish {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
}

.week-meal-dish.is-empty { color: var(--ink-2); }

.week-meal-why {
  font: 400 var(--fs-caption)/1.3 var(--font-caption);
  color: var(--risk);
  overflow: hidden;
}

.week-meal.is-alarm .week-meal-slot,
.week-meal.is-alarm .week-meal-dish.is-empty { color: var(--risk); }

/* Раскрытый приём пищи возвращается к обычному листу: красным в нём остаются
   знак и объяснение, а не вся плашка целиком. */
.week-meal.is-open,
.week-meal.is-open.is-set { background: var(--surface); }
.week-meal.is-open.is-alarm { border-color: var(--risk); }

.week-meal-window { margin: 0; }

.week-time-tools {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.week-time-field { flex: 1 1 150px; }
.week-time-error { margin: 0; }
.week-time-reset { min-height: 32px; padding: 5px 10px; }

.week-meal-risk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.week-meal-reason,
.week-meal-place,
.week-meal-kcal,
.week-meal-marks {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}

.week-meal-place {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------- события без времени --------------------------- */

.week-untimed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px var(--gap-lg);
  border-top: 1px solid var(--border);
}

.week-untimed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-untimed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.week-untimed-day {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  letter-spacing: .08em;
  color: var(--ink-2);
}

.week-untimed-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-untimed-kill {
  min-height: 32px;
  margin-left: auto;
  padding: 4px 8px;
  color: var(--ink-2);
}

/* --------------------------------- подпись --------------------------------- */

.week-legend {
  margin: 0;
  max-width: 76ch;
}

/* --------------------------------- телефон ---------------------------------
   ЯКОРЬ 600 — та же граница, что DAY_MODE_QUERY в ui/week.js и телефонный блок
   в styles.css. Медиа-запрос переменной не задаётся, поэтому все три места помечены
   строкой «ЯКОРЬ 600»: правишь здесь — ищи её и правь везде, иначе режим «день»
   и мобильная вёрстка разойдутся по ширине. */

@media (max-width: 600px) {
  #week-root {
    /* Плотнее, чем на ноутбуке, здесь нельзя: в 393 px блок и так узкий,
       а мелкий по высоте перестанет попадать под палец. */
    --hour-height: 56px;
    --week-time-col: 46px;
  }

  /* Одна колонка не должна иметь собственной ширины: min-content растянул бы
     сетку и вернул горизонтальную прокрутку. */
  .week-cal.is-day {
    overflow-x: hidden;
    /* Вертикаль остаётся браузеру, горизонталь достаётся свайпу: без pan-y
       браузер съедал бы горизонтальный жест и слал pointercancel вместо pointerup. */
    touch-action: pan-y;
  }

  .week-cal.is-day .week-cal-grid { min-width: 0; }

  /* dvh считает свёрнутую панель Safari, vh — нет; из-за vh нижний край сетки
     уезжал под адресную строку. Первая строка — откат для старых браузеров. */
  .week-cal { max-height: 70vh; }
  .week-cal { max-height: 70dvh; }

  /* Колонка одна и широкая — раскрытому блоку хватает её целиком. */
  .week-cal.is-day .week-event.is-open,
  .week-cal.is-day .week-meal.is-open {
    left: 0 !important;
    right: auto;
    width: 100% !important;
  }

  /* На телефоне текст в блоках крупнее: сетка тут — основной способ читать неделю. */
  .week-event-title,
  .week-meal-dish { font-size: 14px; }

  /* Выбор тега пальцем: 34 px у общего чипа мало, мишень поднимается до 44. */
  .week-tag-pick { min-height: var(--tap); }

  .week-tags-hint { margin-left: 0; }

  .week-unparsed {
    margin-left: 0;
    width: 100%;
  }

  .week-form { align-items: stretch; }
  .week-field { flex: 1 1 100%; }
}