/* Карточка дела и лист «Перенести» (этап 3 нового вида; макеты design/новый-вид/часть-1/html/06 и 07).
   Разметка — index.html (#details, #move); поведение — 098-steps.js (название, шаги, файлы), 103-card.js (кнопки, «Когда», «Напомнить», «Описание», новое дело), 102-move-sheet.js.
   Панель — тот же лист .sheet (20-base.css); здесь только то, что меняет её вид. Только токены из 10-tokens.css: цветов, радиусов и размеров текста числами здесь нет
   (проверяет tests/web-tokens.test.ts). Нажимаемое — не меньше --tap. Состояния панели — классы на #details: is-urgent (срочное: красная шапка), is-closed (сделанное или снятое — только чтение),
   is-new (пустая карточка нового дела: только название и «Готово»), is-creating (дело уже создаётся). */

/* ---------- панель ---------- */
.details.is-urgent {
  background:
    linear-gradient(var(--c-urgent-line), var(--c-urgent-line)) top / 100% var(--sp-4) no-repeat,
    linear-gradient(to bottom, var(--c-urgent-bg), var(--c-surface) 200px);
}
.details .dt-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.details .dt-title:empty::before { content: attr(data-ph); color: var(--c-text-2); font-weight: var(--fw-regular); }   /* пустая карточка нового дела: подсказка в самом поле */
.details.is-urgent .dt-title { color: var(--c-urgent-text); }
.details #dtDone { background: var(--c-text); color: var(--c-inverse); }

/* ---------- метки под названием ---------- */
.dt-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); }
.dt-meta:empty { display: none; }
.dt-chip {
  display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-2) var(--sp-8);
  border: 1px solid var(--c-line); border-radius: var(--r-8); background: var(--c-field); color: var(--c-text);
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-semibold);
}
.dt-chip.is-allday { border-color: var(--c-allday-line); background: var(--c-allday-bg); color: var(--c-allday-text); }   /* «на весь день» — жёлтая, как «НА ДЕНЬ» в блоке «Сегодня» */
.dt-chip.is-none { color: var(--c-text-2); }
.dt-chip.is-done { border-color: var(--c-done); background: transparent; color: var(--c-done); }

/* ---------- четыре кнопки ---------- */
.dt-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); margin-top: var(--sp-16); }
.dt-act {
  min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: 0 var(--sp-4);
  border-radius: var(--r-14); background: var(--c-field); color: var(--c-text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium);
}
.dt-act .ico { width: 20px; height: 20px; }
.dt-act:active { opacity: .8; }
.dt-act:disabled { opacity: .4; }
.dt-act-urg { color: var(--c-urgent-text); }
.dt-act-urg[aria-checked="true"] { background: var(--c-urgent-bg); box-shadow: inset 0 0 0 1px var(--c-urgent-line); font-weight: var(--fw-bold); }   /* включено: красная кнопка */
.dt-act[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--c-line); }

/* «Ещё»: повтор, сфера, тип, удалить */
.dt-morebody { margin-top: var(--sp-8); }
.dt-morebody[hidden] { display: none; }
.dt-del .prop-k { color: var(--c-urgent-text); font-weight: var(--fw-medium); }
.dt-morebody .prop:disabled { opacity: .4; }

/* ---------- строки ---------- */
.dt-rows { margin-top: var(--sp-8); }
.dt-row {
  display: flex; align-items: center; gap: var(--sp-12); width: 100%; min-height: 50px; padding: 0;
  border-bottom: 1px solid var(--c-line); text-align: left; color: var(--c-text);
}
.dt-row[hidden] { display: none; }
.dt-row:active { opacity: .8; }
.dt-k { flex: none; width: 92px; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-text-2); }
.dt-v { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; }
.dt-row .chev { flex: none; width: 16px; height: 16px; color: var(--c-text-2); }
.dt-row:disabled .chev { visibility: hidden; }
.dt-row:disabled .dt-v { color: var(--c-text-2); }                                 /* «спрошу «Закончили?» в 14:30» у дела «в работе» — только подпись */

.dt-sec { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--c-line); }
.dt-sec .dt-h { margin-top: var(--sp-12); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-regular); color: var(--c-text-2); }
.dt-sec .dt-h span { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.dt-sec .sec-head { margin-top: 0; }
.dt-sec .sec-head .dt-h { margin-top: 0; }
.dt-sec .sec-head { min-height: var(--tap); padding-top: var(--sp-2); }

/* «Описание» */
.dt-body {
  display: block; width: 100%; min-height: var(--tap); margin: var(--sp-2) 0 0; padding: var(--sp-6) 0 var(--sp-8);
  border: 0; background: transparent; color: var(--c-text); font-family: var(--font-ui); font-size: var(--fs-lead); line-height: var(--lh-lead);
  resize: none; overflow: hidden;                                                   /* высота растёт по тексту (103-card.js, fit) */
}
.dt-body::placeholder { color: var(--c-text-2); }
.dt-body:focus-visible { outline: none; box-shadow: 0 2px 0 var(--c-accent); }
/* конфликт описания: пометка рядом с полем, спокойная (не красная), с двумя кнопками-ссылками */
.dt-bodynote { margin-top: var(--sp-4); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-2); }
.dt-bodynote[hidden] { display: none; }
.dt-bodyacts { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); }
.dt-textbtn { min-height: var(--tap); padding: 0; color: var(--c-accent); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); text-align: left; }
.dt-textbtn:active { opacity: .8; }
.dt-origin { margin-top: var(--sp-12); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-2); }
.dt-origin:empty { display: none; }

/* пустая карточка нового дела: только название и «Готово» */
.details.is-new .dt-acts, .details.is-new .dt-morebody, .details.is-new .dt-rows, .details.is-new .dt-sec, .details.is-new .dt-origin,
.details.is-new .dt-sum, .details.is-new .dt-extra { display: none; }
.details.is-creating .dt-title, .details.is-creating #dtDone { opacity: .6; }       /* дело создаётся: ждём ответа сервера */

/* сделанное или снятое: карточка для чтения */
.details.is-closed #dtFileAdd, .details.is-closed .steps, .details.is-closed .step-add { pointer-events: none; opacity: .5; }
.details.is-closed .dt-body { color: var(--c-text-2); }

/* ---------- лист «Перенести» ---------- */
.mv-kicker { margin-top: var(--sp-14); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2); }
.mv-title { margin-top: var(--sp-2); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.mv-h { margin-top: var(--sp-16); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-text-2); }
.mv-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }
.mv-chip {
  min-height: var(--tap); padding: 0 var(--sp-14); border: 1px solid var(--c-line); border-radius: var(--r-12); background: transparent; color: var(--c-text);
  font-size: var(--fs-sub); line-height: var(--lh-sub);
}
.mv-chip:active { opacity: .8; }
.mv-chip.is-allday { border-color: var(--c-allday-line); background: var(--c-allday-bg); color: var(--c-allday-text); }
.mv-chip.is-sel { border-color: var(--c-text); background: var(--c-text); color: var(--c-inverse); font-weight: var(--fw-semibold); }   /* выбранная кнопка залита */
.mv-native {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-top: var(--sp-8);
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-text-2);
}
.mv-native[hidden] { display: none; }
.mv-input {
  min-height: var(--tap); padding: 0 var(--sp-12); border: 1px solid var(--c-line); border-radius: var(--r-12); background: var(--c-field); color: var(--c-text);
  font-family: var(--font-ui); font-size: var(--fs-lead);                           /* не мельче 16 px: иначе iPhone приближает страницу при фокусе */
}
.mv-hint { min-height: var(--lh-caption); margin-top: var(--sp-8); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-2); }
.mv-hint.is-why { color: var(--c-urgent-text); }                                    /* причина, по которой перенести нельзя (время уже прошло, день выбран не полностью) */
.mv-btns { display: flex; gap: var(--sp-10); margin-top: var(--sp-14); }
.mv-btns .ghost-btn { flex: 1; min-height: var(--tap-btn); border: 1px solid var(--c-line); background: transparent; }
.mv-btns .solid { flex: 2; min-width: 0; min-height: var(--tap-btn); background: var(--c-text); color: var(--c-inverse); font-size: var(--fs-lead); line-height: var(--lh-lead); text-align: center; }