/* Один редактор для Главной, Входящих и Календаря. Списки прокручиваются внутри,
   основные настройки и сохранение остаются на месте. Поля ввода >= 16 px. */
#details, #taskChild {
  --card-edge: color-mix(in srgb, var(--task-accent) 38%, transparent);
  --card-glass: linear-gradient(145deg, color-mix(in srgb, var(--task-accent) 13%, transparent), color-mix(in srgb, var(--fg) 3%, transparent));
  --card-glint: color-mix(in srgb, var(--fg) 19%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--task-surface) 88%, var(--fg)), var(--task-surface)) !important;
  border: 1px solid var(--card-edge) !important;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  border-radius: var(--r-22) var(--r-22) 0 0 !important;
  color: var(--fg);
}
#details {
  height: min(96%, 820px); max-height: 96%; display: flex; flex-direction: column;
  gap: 8px; overflow: hidden;
}
#details > * { flex: none; min-width: 0; }
#details #dtScroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0; overflow-y: auto; }
#details #dtScroll > * { flex: none; min-width: 0; }
#details #dtFlags[hidden], #details .task-reminder-glyph[hidden], #details #dtCancel[hidden] { display: none !important; }
#details #dtFlags { margin: 0; }
#details:not(.is-new) #dtActs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#details:not(.is-new) #dtRemind .dt-v, #details:not(.is-new) #dtRemind .chev { display: block; }
#details.is-new #draftDate { flex: 1; width: 100%; justify-content: flex-start; margin: 0; }
#details > .grabber, #taskChild > .grabber { display: none; }
#details #dtTitle, #details.is-new #dtTitle {
  width: calc(100% - 52px); min-height: 54px; max-height: 78px; overflow-y: auto;
  margin: 0; padding: 10px 12px; border: 1px solid var(--card-edge); border-radius: var(--r-14);
  background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
}
#details .draft-close, #taskChild header [data-cancel] {
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--task-red) 50%, transparent);
  border-radius: var(--r-14); color: var(--task-red);
  background: linear-gradient(145deg, color-mix(in srgb, var(--task-red) 25%, transparent), color-mix(in srgb, var(--task-red) 5%, transparent));
  box-shadow: inset 0 1px var(--card-glint), 0 3px 12px color-mix(in srgb, var(--task-red) 8%, transparent);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
}
#details .draft-close { top: 17px; right: 14px; }
#details .draft-description {
  padding: 0 10px !important; margin: 0 !important; border: 1px solid var(--card-edge) !important;
  border-radius: var(--r-14); background: var(--card-glass);
}
#details #dtBody { height: 44px; min-height: 44px; max-height: 44px; margin: 0; padding: 10px 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
#details .draft-meta-row { display: flex; align-items: stretch; gap: 8px; margin: 0; }
#details #dtMeta {
  flex: none; align-self: center; min-height: 38px; margin: 0; padding: 8px 10px;
  border: 1px solid var(--card-edge); border-radius: var(--r-12); background: var(--card-glass);
  font-size: var(--fs-small); line-height: var(--lh-small); white-space: nowrap;
}
#details #dtMeta[data-state=working], #details #dtMeta[data-state=done] {
  color: var(--task-green); border-color: color-mix(in srgb, var(--task-green) 45%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--task-green) 21%, transparent), color-mix(in srgb, var(--task-green) 6%, transparent));
}
#details #dtMeta[data-state=paused] {
  color: var(--task-yellow); border-color: color-mix(in srgb, var(--task-yellow) 45%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--task-yellow) 21%, transparent), color-mix(in srgb, var(--task-yellow) 6%, transparent));
}
#details #draftDate {
  flex: 0 1 auto; width: auto; margin-left: auto; min-width: 0; min-height: 44px; gap: 5px;
  padding: 7px 9px !important; border-radius: var(--r-12); background: var(--card-glass);
  font-size: var(--fs-small) !important; line-height: var(--lh-small); flex-wrap: wrap; justify-content: flex-end;
}
#details #draftDate > .ico { flex: none; width: 16px; height: 16px; }
#details #draftDate .task-all-day { font-size: var(--fs-micro); line-height: var(--lh-micro); }
#details #dtActs, #details #dtActs.creation { margin: 0 !important; gap: 5px !important; }
#details #dtActs .dt-act { min-height: 54px !important; border-radius: var(--r-12); gap: 4px; }
#details .dt-rows { margin: 0; }
#details #dtRemind, #details #dtRep {
  min-height: 48px; margin: 0; padding: 5px 7px !important; gap: 7px;
  border: 1px solid var(--card-edge) !important; border-radius: var(--r-14); background: var(--card-glass) !important;
  box-shadow: inset 0 1px var(--card-glint); display: flex; align-items: center;
}
#details #dtRemind .dt-k, #details #dtRep .prop-k, #details .sec-head .dt-h, #taskChild header h2, .reminder-column > span, .draft-repeat-field > span {
  width: auto; flex: none; margin: 0; padding: 7px 9px; border: 1px solid var(--card-edge);
  border-radius: var(--r-10); background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--task-accent) !important; font-weight: var(--fw-semibold); letter-spacing: 0;
}
#details #dtRemind .dt-v, #details #dtRep .prop-v {
  min-width: 0; margin-left: auto; padding: 7px 9px; border: 1px solid var(--card-edge); border-radius: var(--r-10);
  background: color-mix(in srgb, var(--task-accent) 9%, transparent); font-size: var(--fs-small); line-height: var(--lh-small);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#details #dtRep .chev, #details #dtRemind .chev { flex: none; width: 14px; height: 14px; }
#details #dtScroll > .draft-resources { flex: 1; min-height: 140px; display: flex; flex-direction: column; gap: 8px; }
#details .draft-resources > .dt-sec {
  display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 5px 7px !important;
  border: 1px solid var(--card-edge); border-radius: var(--r-14); background: var(--card-glass);
}
#details .draft-files-panel { flex: .55; }
#details .draft-files-panel:has(.task-file-empty) { flex: none; }
#details .draft-steps-panel { flex: 1; }
#details .sec-head { flex: none; min-height: 44px; padding: 0; margin: 0 0 3px; gap: 6px; }
#details .sec-head .dt-h { display: flex; align-items: center; white-space: nowrap; }
#details #dtCount, #details #dtFcount { font-size: var(--fs-micro); line-height: var(--lh-micro); margin-left: 4px; }
#details #dtAdd { margin-left: auto; }
#details #dtAdd button, #details #dtFileAdd {
  width: auto; min-height: 44px; padding: 7px 9px; margin: 0; border: 1px solid var(--card-edge); border-radius: var(--r-12);
  background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint); color: var(--task-accent); font-size: var(--fs-small); line-height: var(--lh-small);
}
#details #dtFiles, #details .steps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#details #dtSteps { gap: 5px; padding-bottom: 2px; }
#details .task-file-empty { min-height: 24px; font-size: var(--fs-caption); line-height: var(--lh-caption); }
#details .draft-file { flex: none; margin: 0 0 5px; padding: 2px 4px; border-color: var(--card-edge); background: var(--card-glass); }
#details .draft-file > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#details .draft-step { flex: none; padding: 2px !important; gap: 5px; border-color: var(--card-edge); background: var(--card-glass); }
#details .draft-step input { min-height: 44px; font-size: var(--fs-lead) !important; line-height: var(--lh-lead); padding: 5px 0; }
#details .draft-step .task-step-text { font-size: var(--fs-lead); line-height: var(--lh-lead); padding: 5px 0; background: transparent; border: 0; }
#details [data-check-step], #details [data-remove-step], #details .draft-file button:not(:first-child), #details [data-remove-local-file] {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--card-edge); border-radius: var(--r-12); background: var(--card-glass);
}
#details [data-check-step][aria-pressed=true] { color: var(--task-green); border-color: color-mix(in srgb, var(--task-green) 50%, transparent); background: color-mix(in srgb, var(--task-green) 14%, transparent); }
#details [data-remove-step], #details [data-remove-file], #details [data-remove-local-file] { color: var(--task-red) !important; border-color: color-mix(in srgb, var(--task-red) 40%, transparent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--task-red) 19%, transparent), transparent) !important; }
#details #dtFoot {
  flex: none; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0; padding: 0; background: transparent !important; border: 0; box-shadow: none; z-index: 1;
}
#details .draft-error { grid-column: 1 / -1; margin: 0; }
#details .draft-error:empty { display: none; }
#details #dtDelBar { grid-column: 1; grid-row: 2; margin: 0; }
#details .task-card-footer-actions { display: contents; }
#details #dtCancel { grid-column: 1; grid-row: 2; }
#details #dtDone { grid-column: 2; grid-row: 2; }
#details:not(.is-new):has(#dtDelBar[hidden]) #dtDone { grid-column: 1 / -1; }
#details #dtDel, #details #dtDone, #details #dtCancel, #taskChild footer button {
  min-height: 48px; margin: 0; padding: 8px 12px; border: 1px solid var(--card-edge); border-radius: var(--r-14);
  box-shadow: inset 0 1px var(--card-glint), 0 3px 12px color-mix(in srgb, var(--bg) 20%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: var(--fs-lead); line-height: var(--lh-lead);
}
#details #dtDone, #taskChild [data-apply] {
  color: var(--task-green) !important; border-color: color-mix(in srgb, var(--task-green) 50%, transparent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--task-green) 26%, transparent), color-mix(in srgb, var(--task-green) 6%, transparent)) !important;
}
#details #dtDel { color: var(--task-red); border-color: color-mix(in srgb, var(--task-red) 45%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--task-red) 19%, transparent), color-mix(in srgb, var(--task-red) 4%, transparent)); }
#details #dtCancel { color: var(--task-red); border-color: color-mix(in srgb, var(--task-red) 45%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--task-red) 19%, transparent), color-mix(in srgb, var(--task-red) 4%, transparent)) !important; }
#taskChild { display: flex; flex-direction: column; gap: 12px; max-height: 96%; overflow: hidden; }
#taskChild header { flex: none; gap: 10px; }
#taskChild header h2 { font-size: var(--fs-strong); line-height: var(--lh-strong); padding: 10px 12px; }
#taskChild .draft-child-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
#taskChild footer { flex: none; margin: 0; gap: 8px; }
#taskChild button { border-color: var(--card-edge); border-radius: var(--r-12); background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint); }
#taskChild input:not([type=checkbox]), #taskChild select, #taskChild textarea {
  font-family: var(--font-ui); font-size: var(--fs-lead) !important; line-height: var(--lh-lead); color: var(--fg);
  border: 1px solid var(--card-edge); border-radius: var(--r-12); padding: 10px; background: var(--card-glass); max-width: 100%;
}
#taskChild textarea { width: 100%; min-height: 180px; resize: vertical; }
#taskChild .draft-reminder-presets { margin: 0 0 12px; gap: 7px; }
#taskChild .draft-reminder-presets button { font-size: var(--fs-small); line-height: var(--lh-small); }
#taskChild .draft-reminder-presets button[aria-pressed=true] { border-color: var(--task-accent); background: linear-gradient(145deg, color-mix(in srgb, var(--task-accent) 28%, transparent), color-mix(in srgb, var(--task-accent) 10%, transparent)); }
#taskChild .reminder-column > span { display: inline-block; margin: 0 0 7px; }
#taskChild .reminder-column .draft-wheels { border-color: var(--card-edge); background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint), inset 0 -10px 18px color-mix(in srgb, var(--bg) 20%, transparent); }
#taskChild .reminder-column .draft-wheels::before { height: 44px; border: 1px solid var(--card-edge); border-radius: var(--r-10); background: var(--card-glass); box-shadow: inset 0 1px var(--card-glint); }
#taskChild .reminder-column .draft-wheel { width: 100%; height: 132px; padding: 44px 0; perspective: 260px; mask-image: linear-gradient(transparent, var(--fg) 35%, var(--fg) 65%, transparent); }
#taskChild .reminder-column .draft-wheel button {
  height: 44px; min-height: 44px; padding: 0; border: 0; box-shadow: none; background: transparent;
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums;
  transform: rotateX(var(--wheel-tilt, 0deg)) scale(var(--wheel-scale, .9)); opacity: var(--wheel-alpha, .5); transition: color .15s;
}
#taskChild .reminder-column .draft-wheel button[aria-selected=true] { color: var(--fg); font-weight: var(--fw-bold); }
#taskChild .reminder-add { min-height: 44px; margin: 12px 0 0; border: 1px solid var(--card-edge); background: var(--card-glass) !important; }
#taskChild .draft-custom-date { margin-top: 8px; min-height: 44px; }
#taskChild .reminder-added { border-color: var(--card-edge); background: var(--card-glass); }
#taskChild .reminder-added button { color: var(--task-red); }
#taskChild #draftRepeatKind { width: 100%; min-height: 48px; margin-bottom: 8px; }
#taskChild .draft-repeat-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
#taskChild .draft-repeat-field input:not([type=checkbox]) { width: 88px; min-height: 44px; }
#taskChild .draft-repeat-field input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: 0; border: 1px solid var(--card-edge); border-radius: var(--r-12); background: var(--card-glass); display: grid; place-items: center; }
#taskChild .draft-repeat-field input[type=checkbox]:checked { color: var(--task-green); border-color: var(--task-green); background: color-mix(in srgb, var(--task-green) 15%, transparent); }
#taskChild .draft-repeat-field input[type=checkbox]:checked::after { content: '✓'; font-size: var(--fs-h3); line-height: var(--lh-h3); }
#taskChild select option { color: var(--fg); background: var(--task-surface); }
#taskChild .draft-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 12px 0; }
#taskChild .draft-weekdays label { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 0; }
#taskChild .draft-weekdays input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#taskChild .draft-weekdays span { width: 100%; padding: 12px 0; text-align: center; border: 1px solid var(--card-edge); border-radius: var(--r-10); background: var(--card-glass); font-size: var(--fs-small); line-height: var(--lh-small); }
#taskChild .draft-weekdays input:checked + span { color: var(--task-green); border-color: var(--task-green); background: color-mix(in srgb, var(--task-green) 15%, transparent); }
#taskChild .draft-weekdays input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
#taskChild [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #taskChild .reminder-column .draft-wheel button { transform: scale(var(--wheel-scale,1)); }
}
@media (max-width: 360px) {
  #details, #taskChild { padding-left: 10px !important; padding-right: 10px !important; }
  #details #dtMeta { font-size: var(--fs-caption); padding: 7px; }
  #details .sec-head .dt-h { padding: 7px; }
  #taskChild .draft-weekdays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 700px) {
  #details { gap: 5px; }
  #details #dtScroll { gap: 5px; }
  #details #dtTitle, #details.is-new #dtTitle { min-height: 44px; max-height: 54px; padding: 7px 10px; font-size: var(--fs-strong); line-height: var(--lh-strong); }
  #details .draft-close { top: 12px; }
  #details #dtActs .dt-act { min-height: 48px !important; }
  #details #dtRemind, #details #dtRep { min-height: 44px; }
  #details #dtScroll > .draft-resources { gap: 5px; min-height: 140px; }
  #details .draft-files-panel { flex: .35; }
}
/* При открытой клавиатуре физически меньше места: редактор прокручивается,
   футер остаётся доступен, безопасная зона не создаёт вторую чёрную полосу. */
.kb #details, .kb #taskChild { overflow-y: auto; padding-bottom: 8px !important; }
.kb #details #dtScroll > .draft-resources { flex: none; height: 180px; }
.kb #details #dtFoot { position: sticky; bottom: 0; }
@media (max-height: 560px) {
  #details { overflow-y: auto; }
  #details #dtScroll > .draft-resources { flex: none; height: 140px; }
}