/* Слой вставки и разбора недели. Владелец: таск 32; каркас слоя (как он перекрывает
   <main>) достался от таска 28 и здесь только дополнен.

   Своей палитры экран не заводит: все цвета — токены из styles.css. Классы
   префиксованы intake-*. Общие коробки (.card, .tile, .plate, .button, .empty,
   .field-error) берутся готовыми и по цвету не переопределяются.

   ЯКОРЬ 900 — та же граница, на которой сайдбар превращается в таб-бар: слой
   стоит рядом с оболочкой, а не поверх неё, и его отступ обязан считаться
   от той же величины. Столбцы становятся полосами здесь же: два столбца
   по 340 px в 393 px не помещаются, а третьей границы у проекта нет. */

#intake-root:not(.intake-full):not(.intake-dialog) { display: none; }

/* «Вставка недели» и «Неделя разобрана» — целые экраны, а не диалоги: они
   закрывают собой <main>, но не оболочку. В макете (09, 10, 14) сайдбар остаётся
   на месте и работает — уходить с экрана человеку есть куда и отсюда. */
#intake-root.intake-full {
  position: fixed;
  inset: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--bg);
}

@media (min-width: 900px) {
  #intake-root.intake-full {
    inset: 0 0 0 var(--sidebar-w);
  }
}

/* «Замена календаря» — диалог поверх «Недели»: под ним видно то, что заменяют. */
#intake-root.intake-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  /* Затемнение — то же, что у .modal в styles.css: чернильный, разведённый
     до полупрозрачного. Пятнадцатого цвета ради подложки не заводим. */
  background: color-mix(in srgb, var(--ink) 58%, transparent);
  overflow-y: auto;
}

/* ============================ каркас экрана ============================ */

.intake-screen {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  max-width: 1280px;
  padding: 32px 40px 64px;
}

/* Узел получает фокус при открытии — иначе Esc не с чего было бы поймать. */
.intake-screen:focus { outline: none; }

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

.intake-head-text { min-width: 0; }

.intake-lead {
  margin: 6px 0 0;
  max-width: 78ch;
  color: var(--ink-2);
}

.intake-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Два столбца: слева работа, справа объяснение. Правый уже: в нём подписи,
   а не текст недели. */
.intake-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--gap-lg);
  align-items: start;
}

.intake-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Полоса-заголовок столбца: надзаголовок, волосок и счёт справа. */
.intake-band {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 20px;
}

.intake-band-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.intake-band-note { color: var(--ink-2); }

/* ============================ вставка недели ============================ */

.intake-paste {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Поле во всю карточку: рамка у него уже есть — карточкина.

   Кегль здесь не назван намеренно: его задаёт общее правило полей в styles.css,
   и на телефоне оно поднимает его до 16 px, иначе Safari зумит форму при фокусе.
   Своё `font` этой строчкой отняло бы у экрана ровно ту защиту. */
.intake-textarea {
  min-height: 380px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  line-height: 1.55;
  resize: none;
}

.intake-textarea:focus {
  background: var(--surface);
  /* Контур вместо рамки: рамку здесь носит карточка, и подменять её нельзя —
     поле дёрнется на пиксель. */
  outline: var(--focus-width) solid var(--ink);
  outline-offset: -2px;
}

.intake-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 12px var(--gap);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.intake-foot-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Год. Выбор стоит там, где нарисован, но выключен: команда разбора года
   не принимает, и живой на вид список подставлял бы не тот год молча. */
.intake-year {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: 13px;
}

.intake-year-mark {
  display: inline-flex;
  color: var(--ink-3);
}

.intake-year-select {
  width: auto;
  padding: 4px 10px;
  font-weight: 600;
}

.intake-year-note { color: var(--ink-3); }

.intake-error { color: var(--ink); }

/* ======================= правые столбцы вставки ======================= */

.intake-steps,
.intake-finds {
  display: flex;
  flex-direction: column;
}

.intake-step,
.intake-find {
  display: flex;
  gap: 12px;
  padding: 14px var(--gap);
  border-bottom: 1px solid var(--border);
}

.intake-find { flex-direction: column; gap: 8px; }

.intake-step:last-child,
.intake-find:last-child { border-bottom: 0; }

.intake-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--sage-soft);
  color: var(--sage-deep);
  font: 600 13px/1 var(--font-text);
}

@media (prefers-color-scheme: dark) {
  .intake-step-num { color: var(--sage); }
}

.intake-step-title { margin: 0; }

.intake-step-text { margin: 4px 0 0; }

/* Образец строки — то, что человек увидит в своём тексте. Моноширинный набор
   отличает его от объяснения рядом. */
.intake-find-sample {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: 12px/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}

.intake-find-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--ink-2);
}

.intake-find-mark {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  color: var(--ink-3);
}

.intake-plate {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intake-plate-text { margin: 0; }

/* ============================ отчёт о разборе ============================ */

.intake-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.intake-tile {
  position: relative;
  padding: 16px 18px;
}

.intake-tile-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  color: var(--ink-3);
}

.intake-tile-value {
  font: 800 32px/1.1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}

.intake-tile-label { color: var(--ink-2); }

.intake-notes { display: flex; flex-direction: column; }

.intake-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--gap);
  border-bottom: 1px solid var(--border);
}

.intake-note:last-child { border-bottom: 0; }

.intake-note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}

/* Единственное место экрана, где тратится риск: день, в котором приёму пищи
   некуда встать (История 166). Остальные замечания нейтральны намеренно. */
.intake-note-mark.is-risk {
  background: var(--risk-soft);
  color: var(--risk);
}

.intake-note-body {
  flex: 1;
  min-width: 0;
}

.intake-note-title { margin: 0; }

.intake-note-text { margin: 4px 0 0; }

.intake-note .button { flex: none; }

/* -------------------------- неразобранные строки -------------------------- */

.intake-lines { display: flex; flex-direction: column; }

.intake-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px var(--gap);
  border-bottom: 1px solid var(--border);
}

.intake-line:last-child { border-bottom: 0; }

.intake-line.is-settled { opacity: .65; }

.intake-line-text {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: 400 13px/1.45 var(--font-text);
  overflow-wrap: anywhere;
}

.intake-line-said { margin: 0; color: var(--ink-2); }

.intake-line-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.intake-addform {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intake-addform-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.intake-addform-day { flex: 1 1 140px; width: auto; }

.intake-addform-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-2);
}

.intake-addform-time input { width: auto; }

/* ============================ замена календаря ============================ */

.intake-modal-card {
  width: min(620px, 100%);
  max-height: calc(100dvh - var(--pad) * 2);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.intake-modal-card:focus { outline: none; }

.intake-zamena-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px var(--gap-lg) 18px;
}

.intake-zamena-head .heading { margin: 0; }

.intake-zamena-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.intake-zamena-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--gap-lg);
}

.intake-zamena-col + .intake-zamena-col { border-left: 1px solid var(--border); }

.intake-zamena-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.intake-zamena-item p { margin: 0; }

.intake-zamena-kept {
  margin: 0;
  padding: 0 var(--gap-lg) 14px;
}

/* Отметка «Заодно убрать повисшие правки». Мишень — вся строка целиком:
   флажок остаётся флажком, а 44 px даёт лейбл вокруг него. */
.intake-zamena-drop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tap);
  padding: 14px var(--gap-lg);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.intake-zamena-drop input { flex: none; margin-top: 2px; }

.intake-zamena-drop span { display: block; }

.intake-zamena-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px var(--gap-lg) 18px;
}

/* «Отменить это будет нельзя» стоит рядом с кнопкой, а не в подсказке под ней:
   так велит История 135. Отсюда и место — в той же строке, слева от кнопок. */
.intake-zamena-warn {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

/* ------------------------------------------------------------------
   ЯКОРЬ 900 — столбцы становятся полосами.

   На 393 px (История 164) текст недели идёт первым, объяснения — под ним,
   плитки отчёта — по две в ряд. Поле ввода не мельче 16 px: этим занимается
   общий телефонный блок в styles.css, здесь его не переопределять.
   ------------------------------------------------------------------ */

@media (max-width: 899px) {
  .intake-screen { padding: var(--pad) var(--pad) 48px; }

  .intake-cols { grid-template-columns: minmax(0, 1fr); }

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

  .intake-textarea { min-height: 220px; }

  .intake-foot { align-items: stretch; }

  .intake-foot-buttons { width: 100%; }

  .intake-foot-buttons .button { flex: 1 1 auto; }

  .intake-note { flex-wrap: wrap; }

  .intake-note .button { width: 100%; }

  /* Диалог на телефоне — лист снизу, как .modal-card в общем блоке. */
  #intake-root.intake-dialog {
    align-items: flex-end;
    padding: 0;
  }

  .intake-modal-card {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .intake-zamena-cols { grid-template-columns: minmax(0, 1fr); }

  .intake-zamena-col + .intake-zamena-col {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .intake-zamena-foot .button { flex: 1 1 auto; }
}