/* Экран «Подготовка». Владелец: таск 33.

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

   Мишени: строка задачи и строка дня подняты до --tap (44 px) — флажок остаётся
   флажком, а нажимается вся строка, в которую он обёрнут.

   Телефонный блок в конце файла держится ЯКОРЯ 600 из styles.css: своей границы
   экран не заводит. */

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

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

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

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

.prep-sub,
.prep-note { margin: 0; }

/* Числа справа: сколько осталось на вечер и что стоит вся неделя. Обе величины
   приходят готовыми — вечер из задач блока, неделя из view.prep.total. */
.prep-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  min-width: 0;
}

.prep-total-value { white-space: nowrap; }

.prep-total-note {
  margin: 0;
  color: var(--ink-2);
}

/* «Всё сделано» — одна строка и никаких бейджей (История 161). */
.prep-done-all { margin: 0; }

/* ------------------------- полоса заголовка блока ------------------------- */

.prep-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.prep-band {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.prep-band-title { flex: none; }

/* Линия добирает строку до правого края: в макете надзаголовок и счётчик разведены
   ею по краям блока. Декоративная — от читалки спрятана в разметке. */
.prep-band-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--border);
}

.prep-band-meta {
  flex: none;
  color: var(--ink-2);
  white-space: nowrap;
}

.prep-empty-line { margin: 0; }

.prep-empty { gap: var(--gap); }

/* --------------------------------- задачи --------------------------------- */

.prep-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.prep-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--sage-deep);
  cursor: pointer;
}

.prep-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prep-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.prep-task-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prep-task-when { color: var(--ink-2); }

/* Метка риска в строке надзаголовка не должна тянуться вслед за ним в верхний
   регистр вразрядку дважды: свой кегль у неё уже есть от .risk. */
.prep-task-risk { letter-spacing: .04em; }

.prep-task-detail { color: var(--ink-2); }

.prep-task-minutes {
  flex: none;
  font: 600 var(--fs-body)/1.3 var(--font-text);
  color: var(--ink);
  white-space: nowrap;
  padding-top: 2px;
}

/* ---------------------- «накануне уже не успеть» ---------------------- */

.prep-late {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

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

.prep-late-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

/* Внутри плашки задачи — строки, а не карточки: вторая коробка на цветном фоне
   читалась бы как отдельный список. */
.prep-late .prep-task,
.prep-day-panel .prep-task {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.prep-late .prep-task-line { padding: 8px 0; }

.prep-late .prep-task-detail,
.prep-late .prep-task-meta { color: var(--ink-2); }

/* --------------------------- остальная неделя --------------------------- */

.prep-days {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-radius: var(--r-lg);
  font: 400 var(--fs-body)/1.4 var(--font-text);
  color: var(--ink);
  text-align: left;
}

.prep-day-toggle { cursor: pointer; }

.prep-day-toggle:hover { background: var(--surface-2); }

.prep-day-row.is-free { color: var(--ink-2); }

/* У свободного дня стрелки нет — отступ на её месте держит имена дней в столбик. */
.prep-day-row.is-free .prep-day-name { padding-left: 28px; }

.prep-day-chevron {
  flex: none;
  display: inline-flex;
  color: var(--ink-2);
  transition: transform .12s ease;
}

.prep-day-toggle.is-open .prep-day-chevron { transform: rotate(90deg); }

.prep-day-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.prep-day-date { color: var(--ink-2); }

.prep-day-meta {
  margin-left: auto;
  color: var(--ink-2);
  white-space: nowrap;
}

.prep-day-panel {
  padding: 0 16px 12px;
  border-top: 1px solid var(--border);
}

.prep-day-panel .prep-tasks { gap: 0; }

.prep-day-panel .prep-task + .prep-task { border-top: 1px solid var(--border); }

.prep-day-panel .prep-task-line { padding: 12px 0; }

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

.prep-task.is-done {
  background: var(--sage-soft);
  border-color: transparent;
  box-shadow: none;
}

.prep-task.is-done .prep-task-title,
.prep-task.is-done .prep-task-minutes,
.prep-task.is-done .prep-task-detail,
.prep-task.is-done .prep-task-meta { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   ЯКОРЬ 600 — телефон. Граница взята из styles.css, своей у экрана нет.
   Строки задач и дней остаются мишенями в 44 px: их поднимает min-height выше,
   здесь — только то, что на 393 px действительно другое.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .prep-head {
    gap: var(--gap);
    align-items: baseline;
  }

  .prep-head-main {
    flex: 1 1 200px;
    order: 1;
  }

  /* Сжиматься обязана: подпись под числом длинная, и без права на перенос
     она вытолкнула бы страницу вбок — на 393 px это единственная причина
     горизонтальной прокрутки, которую не поймать сеткой. */
  .prep-total {
    order: 2;
    flex: 0 1 auto;
  }

  .prep-task-line {
    gap: 12px;
    padding: 12px;
  }

  .prep-late .prep-task-line,
  .prep-day-panel .prep-task-line { padding: 10px 0; }

  .prep-day-row { padding: 10px 12px; }

  .prep-day-panel { padding: 0 12px 10px; }

  /* Минуты встают вровень с верхней строкой карточки: на узком экране надзаголовок
     переносится, и прежний отступ ронял их на середину строки. */
  .prep-task-minutes { padding-top: 0; }

  .prep-task-body { gap: 3px; }
}