/* ─── Модалка задачи v2: одно поле + смарт-чипы + прогрессивное раскрытие ───
   Порт прототипа skrably-task-modal_7: 90% задач заводятся за 2 секунды
   (название + Enter), остальное открывается чипами. Правила черчения:
   отступы по шкале 4/8/12/16/20, каждый flex-ряд wrap + min-width:0,
   тап-цели ≥44px на таче, ≤480px — полноэкранный лист (Mini App). */

#task-dialog{width:min(560px, calc(100vw - 24px)); max-width:min(560px, calc(100vw - 24px));}
/* интервалы секций задают ТОЛЬКО их margin-top (как блюпринт-mbody: блок-поток),
   без лишнего flex-gap — иначе gap+margin складывались в разнобой 18/22/26 */
#task-dialog .m-body{display:flex; flex-direction:column; gap:0;}
#task-dialog .m-body *{min-width:0;}

/* скрытые form-поля (bucket/is_milestone живут в форме ради FormData и подсказок) */
.tm-hidden{display:none !important;}

/* ═══ чертёж 02: шапка · нейро-название · описание · тип · чипы · ghost ═══
   геометрия: шкала высот {40,48,56,96}, r=h/4 (R10 у 40, R12 у 48, R16-потолок
   у полей), штрих контейнера 2.0 (#squiggle), ghost 1.5 dashed, маркер = актив.
   палитра — токены tokens.css (graphite/pencil/marker/amber…). */

/* ── шапка 56: ← назад · заголовок · ✕ (обе 40×40 R10) ── */
.tmx-top{display:flex; align-items:center; gap:8px; height:56px; margin:-6px 0 0;}
.tmx-ttl{
  flex:1; min-width:0; text-align:center; color:var(--graphite);
  font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; line-height:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tmx-ibtn{
  width:40px; height:40px; flex:none; position:relative; border-radius:10px;
  background:none; border:none; cursor:pointer; color:var(--graphite-soft);
  display:flex; align-items:center; justify-content:center;
}
.tmx-ibtn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);
}
.tmx-ibtn:hover{background:var(--marker); color:var(--graphite);}
.tmx-ibtn:focus-visible{outline:3px solid var(--ink-blue); border-radius:10px;}
.tmx-ibtn svg{width:22px; height:22px;}
.tmx-ibtn.s36{width:36px; height:36px; border-radius:9px;}
.tmx-ibtn.s36::before{border-radius:9px;}
.tmx-ibtn.s36 svg{width:20px; height:20px;}

/* карандашная линия-разделитель (под названием — по полю; .tmx-rule-in) */
.tmx-rule{height:4px; color:var(--graphite); margin:2px -10px 0;}
.tmx-rule-in{margin:2px 0 0;}
.tmx-rule svg{width:100%; height:100%; display:block;}
/* полноширинной линии ПОД ШАПКОЙ в чертеже-листе 02 нет — прячем её ВЕЗДЕ
   (десктоп и телефон); .tmx-rule-in под названием остаётся. Иначе на десктопе
   линия + двойной flex-gap формы давали провал шапка→контент 28px вместо 16
   (flex-gap 10 → m-body + паддинг m-body 6). Юзер: «зазоры исправляли везде». */
#task-form > .tmx-rule{display:none;}

/* ── метка-подпись секции (нейро / комментарии) ── */
.tmx-lab{
  display:flex; align-items:center; gap:6px; min-height:16px; line-height:1;
  font-size:12px; color:var(--pencil); margin-top:0;
  /* mt:0 — верхний отступ метки даёт flex-gap формы (10) + паддинг m-body (6) =
     16 у названия; у метки комментариев секцию задаёт .tmx-cmts (mt:16) */
}
.tmx-lab svg{width:14px; height:14px; flex:none;}
.tmx-lab .st{
  margin-left:auto; font-size:11px; color:var(--pencil); opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}

/* ── нейро-название: Caveat, собирается из описания; ↻ — другой вариант ── */
.tmx-trow{display:flex; align-items:center; gap:8px; min-height:44px;}
#task-dialog input.tmx-title{
  flex:1; min-width:0; background:transparent; border:none; border-radius:0;
  box-shadow:none; padding:4px 2px;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; line-height:1.1;
  color:var(--graphite);
}
#task-dialog input.tmx-title:focus{box-shadow:none; background:var(--marker);}
#task-dialog input.tmx-title::placeholder{
  font-family:'Neucha',cursive; font-weight:400; font-style:italic;
  font-size:.95rem; color:var(--pencil);
}
.tmx-trow.think .tmx-title{opacity:.4;}

/* ── описание — главное поле 96, R16, mic-диктовка ── */
.tmx-desc{position:relative; margin-top:8px;}
#task-dialog textarea#tm-desc{
  display:block; width:100%; height:96px; resize:none;
  background:var(--paper2, #FFFDF6); border:none; outline:none; box-shadow:none;
  border-radius:16px; padding:10px 44px 10px 14px;
  font-family:'Neucha',cursive; font-size:.98rem; line-height:1.35; color:var(--graphite);
}
#task-dialog textarea#tm-desc:focus{box-shadow:none;}
#task-dialog textarea#tm-desc::placeholder{font-style:italic; color:var(--pencil);}
.tmx-desc::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);
}
/* описание с таблицей (js/richtext.js): вместо поля — разобранный вид, тап
   по нему возвращает текстовую правку (сырой markdown/TSV живёт в textarea) */
.tmx-descview{
  max-height:46vh; overflow:auto; min-width:0; cursor:text;
  background:var(--paper2, #FFFDF6); border-radius:16px; padding:10px 26px 10px 14px;
  font-family:'Neucha',cursive; font-size:.95rem; line-height:1.35; color:var(--graphite);
}
.tmx-descview:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.tmx-desc.rt-view textarea#tm-desc, .tmx-desc.rt-view .tmx-mic{display:none;}
.tmx-desc.rt-view::after{           /* подсказка «тут правится текстом» */
  content:"✎"; position:absolute; right:9px; bottom:5px;
  color:var(--pencil); font-size:1rem; pointer-events:none;
}
.tmx-mic{
  position:absolute; right:10px; bottom:8px; width:32px; height:32px;
  background:none; border:none; cursor:pointer; color:var(--graphite-soft);
  display:flex; align-items:center; justify-content:center;
}
.tmx-mic svg{width:24px; height:24px;}
.tmx-mic:hover{color:var(--graphite);}
/* запись: красный + пульс (гаснет под reduced-motion — правило #task-dialog * ниже) */
.tmx-mic.rec{color:var(--red);}
.tmx-mic.rec svg{animation:tmx-mic-pulse 1s ease-in-out infinite;}
@keyframes tmx-mic-pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.tmx-mic.busy{opacity:.5;}
.tmx-mic:disabled{cursor:default;}

/* ── сегмент типа: в ящик ↔ в базу знаний (40/R10, маркер = актив) ── */
.tmx-seg{
  margin-top:12px; height:40px; display:flex; gap:4px; padding:4px; position:relative;
  background:var(--paper2, #FFFDF6); border-radius:10px;
}
.tmx-seg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);
}
.tmx-seg button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--pencil);
  background:none; border:none; cursor:pointer; position:relative; z-index:0;
  border-radius:8px; line-height:1;
}
.tmx-seg button svg{width:19px; height:19px; flex:none;}
.tmx-seg button.on{color:var(--graphite); font-family:'Caveat',cursive; font-weight:700; font-size:1rem;}
.tmx-seg button.on::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--marker); border-radius:8px; transform:rotate(-1deg);
}
.tmx-seg button:focus-visible{outline:3px solid var(--ink-blue); border-radius:8px;}

/* ── чипы: дата + веха (40/R10) ── */
.tmx-chips{display:flex; gap:8px; margin-top:8px;}
.tmx-chip{
  flex:1; min-width:0; height:40px; position:relative; border-radius:10px;
  display:flex; align-items:center; gap:7px; padding:0 12px;
  background:var(--paper2, #FFFDF6); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--graphite-soft);
}
.tmx-chip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);
}
.tmx-chip svg{width:20px; height:20px; flex:none;}
.tmx-chip .cvl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tmx-chip .dn{width:14px; height:14px; margin-left:auto; color:var(--pencil);}
.tmx-chip:hover{background:var(--marker); color:var(--graphite);}
.tmx-chip:focus-visible{outline:3px solid var(--ink-blue); border-radius:10px;}
.tmx-chip.mile{flex:none;}
.tmx-chip.mile.on, .tmx-chip[aria-expanded="true"]{background:var(--marker); color:var(--graphite);}
.tmx-chip.mile.on .star{fill:var(--amber);}

/* ── ghost: +чек-лист +вложение (1.5 dashed) ── */
.tmx-ghosts{display:flex; gap:8px; margin-top:8px;}
/* у вехи главное содержимое карточки — хаб её задач: ghost-кнопки уезжают ПОД
   него (перенос делает syncMileUI) и отделяются пунктиром секции 1.4 dashed */
.tmx-ghosts.under{margin-top:16px; padding-top:16px; position:relative;}
.tmx-ghosts.under::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  border-top:1.4px dashed var(--pencil-faint); filter:url(#squiggle);
}
.tmx-gbtn{
  flex:1; height:40px; position:relative; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--graphite-soft);
}
.tmx-gbtn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);
}
.tmx-gbtn:hover{background:var(--paper2, #FFFDF6); color:var(--graphite);}
.tmx-gbtn:focus-visible{outline:3px solid var(--ink-blue); border-radius:10px;}
.tmx-gbtn svg{width:19px; height:19px;}

/* «в базу знаний»: гасим дату/веху/связи/исполнителя и ghost-кнопки — у знания
   нет срока, вехи, «кто делает», чек-листа и вложений (его поля — в #card-kb) */
.m-body.kb .tmx-chips, .m-body.kb #chip-part, .m-body.kb .mile-part, .m-body.kb #card-mile,
.m-body.kb .tm-who, .m-body.kb .tmx-ghosts{
  opacity:.35; pointer-events:none;
}
/* «часть другой вехи…» — тихая текст-ссылка под чипами (вход в поповер режимов) */
.tmx-sublink{
  display:block; margin-top:6px; background:none; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.82rem; color:var(--pencil);
  text-decoration:underline dashed; text-underline-offset:3px; padding:2px;
}
.tmx-sublink:hover{color:var(--graphite);}
.tmx-sublink:focus-visible{outline:3px solid var(--ink-blue); border-radius:6px;}

/* ── поповеры чипов (открыт только один) ── */
.tm-pop{
  display:none; margin-top:8px; padding:12px 14px; background:#FFFDF6;
  position:relative; animation:tm-pin .18s ease;
}
.tm-pop::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.tm-pop.open{display:block;}
@keyframes tm-pin{from{transform:translateY(-6px); opacity:0;} to{transform:none; opacity:1;}}
.tm-pop .prow{display:flex; gap:10px; row-gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0;}
.tm-pop .prow:first-child{margin-top:0;}
.tm-pop .prow:last-child{margin-bottom:0;}
.tm-pop .plbl{font-family:'Caveat',cursive; font-size:1.05rem; color:var(--graphite-soft); min-width:74px;}
.tm-pop .arr{color:var(--pencil); flex:none;}

.tm-mini{
  font-family:'Neucha',cursive; font-size:.8rem; color:var(--graphite-soft);
  background:#FFFDF6; border:none; cursor:pointer; padding:4px 10px; position:relative;
}
.tm-mini::before{
  content:""; position:absolute; inset:0;
  border:1.4px dashed var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.tm-mini:hover{color:var(--graphite);}

/* сегменты зоны */
.tm-seg{display:flex; gap:6px; flex-wrap:wrap; flex:1;}
.tm-seg button{
  font-family:'Neucha',cursive; font-size:.9rem; padding:5px 13px;
  background:#FFFDF6; color:var(--graphite-soft); border:none; cursor:pointer; position:relative;
}
.tm-seg button::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.tm-seg button[aria-pressed="true"]{background:var(--marker); color:var(--graphite);}
.tm-seg button[aria-pressed="true"]::before{border-color:var(--graphite);}

/* ── «кто делает»: бросок задачи + кубик ──
   подписи В ПОТОКЕ колонкой под аватаром. Было absolute (nm bottom:-24,
   doing bottom:-38) + резерв padding-bottom:30 — длинное имя резалось по
   max-width:66px, а «на нём» вылезало за резерв и липло к ghost-кнопкам
   ниже. Теперь колонка сама держит высоту: имя переносится в 2 строки,
   зазор до следующей секции реальный (16). */
.tm-who{margin:16px 0 0;}
.tm-wlbl{font-family:'Caveat',cursive; font-size:1.15rem; color:var(--graphite-soft);}
.tm-whint{font-size:.8rem; color:var(--pencil);}
.tm-who-row{
  display:flex; align-items:flex-start; gap:16px; row-gap:16px;
  margin:8px 0 8px; padding:0 2px; flex-wrap:wrap;
}
.toss-ava{
  position:relative; z-index:0; background:none; border:none; cursor:pointer;
  padding:0; flex:none; transition:transform .15s ease;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.toss-ava:hover{transform:translateY(-3px);}
.toss-ava:focus-visible{outline:3px solid var(--ink-blue); outline-offset:6px; border-radius:50%;}
.toss-ava .ava{
  width:56px; height:56px; font-size:1.5rem; display:flex;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.12);
}
/* актив = маркер-ореол за аватаром (не обводка) */
.toss-ava.on::after{
  content:""; position:absolute; left:50%; top:28px; width:68px; height:68px;
  margin:-34px 0 0 -34px; z-index:-1; pointer-events:none;
  background:var(--marker); border-radius:50%; transform:rotate(-2deg);
}
/* имя не режем: 2 строки по закону wrap (Л1), дальше «…» */
.toss-ava .nm, .tm-dice .nm{
  font-family:'Neucha',cursive; font-size:.75rem; color:var(--pencil);
  max-width:96px; text-align:center; line-height:1.2; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.toss-ava.on .nm{color:var(--graphite); font-family:'Caveat',cursive; font-weight:700; font-size:.85rem;}
.toss-ava .doing{
  display:none; font-size:.7rem; color:var(--amber); line-height:1.2; white-space:nowrap;
}
.toss-ava.on .doing{display:block;}
.toss-ava.catch .ava{animation:tm-catch .5s ease;}
@keyframes tm-catch{
  0%{transform:scale(1);} 35%{transform:scale(1.28) rotate(-6deg);}
  60%{transform:scale(.94) rotate(3deg);} 100%{transform:scale(1);}
}
/* кубик — та же колонка, что у аватара: коробка 48/R12 + подпись под ней
   (раньше подпись висела absolute и требовала резерва у ряда) */
.tm-dice{
  margin-left:auto; flex:none; padding:0; line-height:1; color:var(--graphite-soft);
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.tm-dice .db{
  position:relative; width:48px; height:48px; border-radius:12px;
  background:var(--paper2, #FFFDF6); transition:transform .15s ease;
  display:flex; align-items:center; justify-content:center;
}
.tm-dice .db::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.tm-dice svg{width:30px; height:30px;}
.tm-dice:hover .db{background:var(--marker); color:var(--graphite); transform:rotate(-8deg) scale(1.06);}
.tm-dice:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px; border-radius:12px;}
.tm-dice.roll .db{animation:tm-dice-r .5s ease infinite;}
@keyframes tm-dice-r{0%,100%{transform:rotate(-10deg);} 50%{transform:rotate(12deg);}}

/* летящая «бумажка» (потомок диалога — рисуется в top layer поверх) */
.tm-flyer{
  position:fixed; z-index:60; pointer-events:none;
  background:#fff; padding:4px 12px;
  font-family:'Neucha',cursive; font-size:.85rem; color:var(--graphite);
  border:1.6px solid var(--graphite); border-radius:var(--r-pill);
  box-shadow:2px 3px 0 rgba(44,42,38,.15); white-space:nowrap; max-width:60vw;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── поле модалки: подпись 12 + коробка 48/R12 на бумаге под карандашным
   контуром 1.5. Общий примитив: панель «когда» (taskwhen.css) и карточка
   «в шкаф» — белых нативных прямоугольников в модалке больше нет. ── */
.tmf-f{display:flex; flex-direction:column; gap:4px; min-width:0;}
.tmf-l{
  font-family:'Neucha',cursive; font-size:12px; line-height:1; color:var(--pencil);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tmf-box{
  position:relative; height:48px; border-radius:12px; display:flex; align-items:center;
  background:var(--paper2, #FFFDF6);
}
.tmf-box::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil); border-radius:12px; filter:url(#squiggle);
}
.tmf-box:focus-within::before{border-color:var(--ink-blue); border-width:2px;}
.tmf-box input, .tmf-box select{
  flex:1; min-width:0; width:100%; height:100%; padding:0 12px;
  -webkit-appearance:none; appearance:none;
  background:none; border:none; border-radius:12px; box-shadow:none;
  font-family:'Neucha',cursive; font-size:16px; color:var(--graphite);
}
.tmf-box input:focus, .tmf-box select:focus{box-shadow:none;}
.tmf-dn{width:14px; height:14px; flex:none; margin-right:12px; color:var(--pencil); pointer-events:none;}

/* ── карточка «в шкаф» (режим «в базу знаний», js/task-kb.js) ── */
#card-kb .kinds{margin:4px 0 0;}
#card-kb .kb-kl{display:block; margin-top:12px;}
.kb-row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.kb-foot{display:flex; align-items:center; gap:8px; margin-top:12px;}
.kb-hint{flex:1; min-width:0; font-size:12px; color:var(--pencil);}
#kb-move{flex:none; height:32px; display:inline-flex; align-items:center; padding:0 12px;}

/* ── карточки секций (описание / чеклист) ── */
.tm-card{background:#FFFDF6; margin-top:8px; padding:12px 14px; position:relative;} /* gap:0 у m-body → карточке нужен свой отступ */
.tm-card::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.tm-card h3{
  font-family:'Caveat',cursive; font-size:1.25rem; font-weight:700;
  display:flex; align-items:center; gap:10px; margin:0; padding-right:0;
}
.tm-card .x{
  margin-left:auto; flex:none; background:none; border:none; cursor:pointer;
  color:var(--pencil-faint); font-size:1.1rem; line-height:1; padding:2px 4px;
}
.tm-card .x:hover{color:var(--red);}
#task-dialog textarea.tm-notes{
  width:100%; min-height:64px; margin-top:6px; background:transparent;
  box-shadow:none; border-radius:0; padding:2px; resize:vertical;
  font-size:.98rem; line-height:1.4;
}
#task-dialog textarea.tm-notes:focus{box-shadow:none;}

/* ── чеклист: шаги ↔ покупки ── */
.cl-head{display:flex; align-items:center; gap:10px; row-gap:6px; flex-wrap:wrap;}
.cl-prog{
  font-family:'Caveat',cursive; font-size:1rem; color:var(--graphite-soft);
  background:var(--marker); padding:1px 10px; border-radius:var(--r-pill);
}
.cl-mode{display:flex; gap:6px; margin-left:auto;}
.cl-mode button{
  font-family:'Neucha',cursive; font-size:.82rem; padding:3px 10px;
  background:none; border:none; cursor:pointer; position:relative; color:var(--graphite-soft);
}
.cl-mode button::before{
  content:""; position:absolute; inset:0;
  border:1.3px dashed var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.cl-mode button[aria-pressed="true"]{background:var(--marker); color:var(--graphite);}
.cl-mode button[aria-pressed="true"]::before{border-style:solid; border-color:var(--graphite);}
.cl-list{margin-top:10px; display:flex; flex-direction:column; gap:7px;}
.cl-list:empty{margin-top:0;}
.cl-item{
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  background:var(--paper); border-radius:var(--r-pill); position:relative;
}
.cl-item::before{
  content:""; position:absolute; inset:0;
  border:1.3px solid var(--pencil-faint); border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.cl-check{
  width:22px; height:22px; flex:none; border:none; cursor:pointer;
  border-radius:7px 10px 8px 9px; position:relative;
  background:#fff; box-shadow:inset 0 0 0 1.6px var(--graphite);
}
.cl-item.done .cl-check::after, .ml-item.done .cl-check::after{
  content:"✓"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-weight:700; font-size:1rem;
}
.cl-item .tx{flex:1; font-size:.97rem; overflow-wrap:anywhere;}
.cl-item.done .tx{
  color:var(--pencil); text-decoration:line-through;
  text-decoration-color:var(--strike); text-decoration-thickness:2px;
}
.cl-item .em{font-size:1.1rem; width:24px; flex:none; text-align:center;}
.cl-item .qty{display:flex; align-items:center; gap:6px; flex:none;}
.cl-item .qty button{
  width:22px; height:22px; border:none; cursor:pointer; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 1.4px var(--pencil);
  font-size:.95rem; line-height:1; color:var(--graphite-soft); padding:0;
}
.cl-item .qty b{font-family:'Caveat',cursive; min-width:18px; text-align:center;}
.cl-item .rm{
  flex:none; background:none; border:none; cursor:pointer;
  color:var(--pencil-faint); font-size:.95rem; line-height:1; padding:2px 4px;
}
.cl-item .rm:hover{color:var(--red);}
.cl-add{display:flex; gap:8px; margin-top:9px;}
.cl-add input{flex:1; font-size:.95rem;}
.cl-add .btn{flex:none; font-size:.92rem;}

/* ── вложения: чипы-ссылки + фото-тумбы ── */
.att-add{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.att-add input{flex:1; min-width:160px; font-size:.95rem;}
.att-add .btn{flex:none; font-size:.92rem;}
.att-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.att-links:empty{margin-top:0;}
.lchip{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  font-size:.86rem; background:#fff; padding:5px 11px; position:relative;
}
.lchip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.4px solid var(--ink-blue); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.lchip a{
  color:var(--ink-blue); text-decoration:none; position:relative; z-index:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:min(210px, 52vw);
}
.lchip a:hover{text-decoration:underline dashed; text-underline-offset:2px;}
.lchip .rm{
  flex:none; background:none; border:none; cursor:pointer; position:relative; z-index:1;
  color:var(--pencil-faint); font-size:.9rem; line-height:1; padding:1px 2px;
}
.lchip .rm:hover{color:var(--red);}
.att-imgs{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;}
.att-imgs:empty{margin-top:0;}
.timg-w{position:relative;}
.timg{
  width:74px; height:74px; object-fit:cover; display:block;
  border-radius:12px 16px 12px 14px;
  box-shadow:0 0 0 1.8px var(--graphite), 3px 4px 0 rgba(44,42,38,.12);
}
.timg-w .rm{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px;
  background:#fff; border:none; cursor:pointer; border-radius:50%;
  box-shadow:0 0 0 1.5px var(--graphite);
  font-size:.8rem; line-height:1; color:var(--graphite-soft); padding:0;
}
.timg-w .rm:hover{color:var(--red);}

/* ── карточка-превью ссылки (unfurl, js/unfurl.js) ── используется в комментариях
   и во вложениях-ссылках. Акцент — золото (--amber, канон блюпринтов); без
   filter:url(#squiggle) (плоская рамка со sketch-радиусом) → нечего гасить под
   light-fx/reduced-motion. Анимаций нет — только opacity скелета (§1). */
.uf-inline{
  color:var(--ink-blue); text-decoration:underline dotted;
  text-underline-offset:2px; word-break:break-word;
}
.unfurl{
  display:block; text-decoration:none; color:inherit; margin-top:8px;
  max-width:340px; background:var(--paper2); position:relative; overflow:hidden;
  border:1.5px solid var(--pencil-faint); border-left:3px solid var(--amber);
  border-radius:var(--r-input);
}
.unfurl:hover{border-color:var(--amber);}
.unfurl.uf-loading{opacity:.7;}
.uf-text{display:block; padding:8px 11px;}
.uf-site{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--amber); margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.uf-title{
  font-weight:700; font-size:.9rem; line-height:1.25; color:var(--graphite);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.uf-desc{
  font-size:.82rem; line-height:1.3; color:var(--graphite-soft); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.uf-title:empty, .uf-desc:empty{display:none;}
.uf-img{
  display:block; width:100%; max-height:168px; object-fit:cover;
  border-top:1.5px solid var(--pencil-faint);
}
/* компактная карточка (метаданных нет): только сайт-хост, без пустого места */
.unfurl.uf-min{border-left-color:var(--pencil); max-width:260px;}
.unfurl.uf-min .uf-site{color:var(--graphite-soft); text-transform:none; font-weight:600;}

/* вложение-ссылка: карточка на всю ширину колонки + крестик поверх неё */
.uf-att{position:relative; flex-basis:100%; max-width:100%;}
.uf-att .unfurl{max-width:100%; margin-top:0;}
.uf-att .rm{
  position:absolute; top:6px; right:6px; width:22px; height:22px;
  background:#fff; border:none; cursor:pointer; border-radius:50%;
  box-shadow:0 0 0 1.5px var(--graphite);
  font-size:.8rem; line-height:1; color:var(--graphite-soft); padding:0; z-index:2;
}
.uf-att .rm:hover{color:var(--red);}

/* превью ссылки из описания (#tm-desc-uf, updateDescUnfurl): под полем текста */
.tm-uf{margin:2px 2px 10px;}
.tm-uf .unfurl{max-width:100%; margin-top:0;}

/* ── майлстоун: панель ★, хаб со сходящимися задачами, пикер с доски ── */
#mile-lbl{
  display:inline-block; max-width:min(190px, 40vw);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
}
.mile-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.mile-head h3{flex:1; min-width:120px;}
.mile-ring{position:relative; width:46px; height:46px; flex:none; display:inline-block;}
.mile-ring svg{width:46px; height:46px; transform:rotate(-90deg);}
.mile-ring .bg{fill:none; stroke:var(--pencil-faint); stroke-width:3.4;}
.mile-ring .fg{
  fill:none; stroke:var(--ink-blue); stroke-width:3.4; stroke-linecap:round;
  transition:stroke-dashoffset .35s ease;
}
.mile-ring .st{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-blue); font-size:1.25rem; filter:url(#squiggle);
}
.mile-list{
  margin:12px 0 4px 20px; border-left:2px dashed var(--pencil);
  padding:2px 0 2px 16px; display:flex; flex-direction:column; gap:8px;
}
.ml-empty, .mp-empty{font-size:.88rem; color:var(--pencil); padding:8px 4px;}
.ml-item{
  position:relative; display:flex; align-items:center; gap:9px;
  background:var(--paper); padding:7px 10px; border-radius:var(--r-pill);
}
.ml-item::before{
  content:""; position:absolute; left:-16px; top:50%; width:12px;
  border-top:2px dashed var(--pencil);
}
.ml-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.3px solid var(--pencil-faint); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.ml-item .tx{flex:1; font-size:.95rem; overflow-wrap:anywhere;}
.ml-item.done .tx{
  color:var(--pencil); text-decoration:line-through;
  text-decoration-color:var(--strike); text-decoration-thickness:2px;
}
.ml-item .ava{width:26px; height:26px; font-size:.9rem; flex:none; position:relative; z-index:1;}
.ml-item .cl-check, .ml-item .rm{position:relative; z-index:1;}
.ml-item .rm{
  flex:none; background:none; border:none; cursor:pointer;
  color:var(--pencil-faint); font-size:.95rem; line-height:1; padding:2px 4px;
}
.ml-item .rm:hover{color:var(--red);}
.ml-link{margin-top:9px;}
.ml-link .btn{font-size:.9rem;}
.mpick{margin-top:12px; padding:16px; background:var(--paper); position:relative;}
.mpick::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:var(--r-sketch2);
  filter:url(#squiggle);
}
.mpick #mp-q{width:100%; font-size:.92rem;}
.mp-list{
  max-height:216px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:4px; margin:12px 0 4px; padding-right:4px;
}
.mp-row{
  /* flex-direction:row — перебиваем общий dialog label{flex-direction:column},
     иначе строка складывается в вертикальную колонку (имя по буквам, ~300px) */
  display:flex; flex-direction:row; align-items:center; gap:8px; padding:8px;
  background:#fff; border-radius:var(--r-pill); cursor:pointer; position:relative;
}
.mp-row::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.2px solid var(--pencil-faint); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.mp-row input{accent-color:var(--ink-blue); width:17px; height:17px; flex:none; margin:0;}
.mp-row .tx{flex:1; min-width:0; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-row .meta{font-size:.72rem; color:var(--pencil); flex:none; white-space:nowrap;}
.mp-row .ava{width:22px; height:22px; font-size:.78rem; flex:none;}
.mp-foot{display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap;}
.mp-cancel{
  background:none; border:none; cursor:pointer; padding:2px 4px;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--pencil);
}
.mp-cancel:hover{color:var(--red);}
.mile-part{margin:8px 0 0; font-size:.9rem; color:var(--graphite-soft);}
.mile-part b{color:var(--ink-blue); font-family:'Caveat',cursive; font-size:1.05rem;}
.mile-part button{
  background:none; border:none; cursor:pointer; color:var(--pencil);
  font-family:'Neucha',cursive; font-size:.85rem; margin-left:8px;
  text-decoration:underline dashed; text-underline-offset:2px;
}
.mile-part button:hover{color:var(--red);}

/* ── комментарии: композер виден всегда (48/R12), пузыри paper2 ── */
.tmx-cmts{margin-top:16px;}
/* «создано …» — тихая мета В ШАПКЕ label-ряда, по центру между «название·нейросеть»
   и вариантами: свой margin-left:auto + margin-left:auto у .st = два auto центрируют */
.tmx-created{margin-left:auto; font-family:'Neucha',cursive; font-size:11px;
  color:var(--pencil); opacity:.9; white-space:nowrap; line-height:1;}
.tmx-bubbles{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.tmx-bubbles:empty{margin-top:0;}
/* шапка секции: метка «комментарии · N» слева, «+ добавить комментарий» справа
   (компактная пунктирная кнопка, в одну строку, сразу под пунктиром секции) */
.tmx-chead{display:flex; align-items:center; gap:8px;}
.tmx-chead .tmx-lab{min-width:0;}
.tmx-addc{
  margin-left:auto; flex:none; height:32px; position:relative; border-radius:8px;
  display:flex; align-items:center; gap:6px; padding:0 12px; white-space:nowrap;
  background:none; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.85rem; color:var(--graphite-soft);
}
.tmx-addc::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:8px; filter:url(#squiggle);
}
.tmx-addc svg{width:16px; height:16px; flex:none;}
.tmx-addc:hover{background:var(--paper2, #FFFDF6); color:var(--graphite);}
.tmx-addc:focus-visible{outline:3px solid var(--ink-blue); border-radius:8px;}
.tmx-cmp{position:relative; display:flex; margin-top:8px;}
.tmx-cmp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.tmx-cmp input{
  flex:1; min-width:0; height:48px; background:var(--paper2, #FFFDF6);
  border:none; outline:none; box-shadow:none; border-radius:12px;
  padding:0 52px 0 14px; font-family:'Neucha',cursive; font-size:.95rem; color:var(--graphite);
}
.tmx-cmp input:focus{box-shadow:none;}
.tmx-cmp input::placeholder{font-style:italic; color:var(--pencil);}
.tmx-cmp .send{
  position:absolute; right:4px; top:4px; width:40px; height:40px; border-radius:9px;
  background:none; border:none; cursor:pointer; color:var(--graphite-soft);
  display:flex; align-items:center; justify-content:center;
}
.tmx-cmp .send:hover{background:var(--marker); color:var(--graphite);}
.tmx-cmp .send svg{width:22px; height:22px;}
.tmx-cmp .send:disabled{opacity:.4; cursor:default;}
.tmx-cmp .send:disabled:hover{background:none; color:var(--graphite-soft);}

/* ── футер: в корзину (red dashed, только правка) · отмена · сохранить (gold) ── */
.tmx-foot{display:flex; align-items:center; gap:8px; margin-top:16px;}
.tmx-foot .tmx-sp{flex:1;}
.tmx-foot .btn{
  height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; font-size:.95rem;
}
.tmx-foot .btn::before{border-radius:12px;}
.tmx-foot .del{color:var(--red); flex:none; padding:0 13px;}
.tmx-foot #task-save{
  background:var(--amber); color:#fff;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem; padding:0 22px;
}
.tmx-foot #task-save::before{border-color:var(--graphite);}

/* ── ДЕСКТОП/ПЛАНШЕТ (плавающая модалка, ≥481): вся модалка — ОДИН скролл ──
   Контент целиком — шапка (←/✕), тело, футер (save) — прокручивается как одно
   внутри окна, ограниченного max-height:94dvh; ничего НЕ приколото. На невысоком
   окне докручиваешь и до шапки сверху, и до футера снизу — без обрезания.
   overscroll-behavior:contain держит скролл внутри модалки (доска под ней стоит).
   Скролл-контейнер — сам #task-dialog: overflow-y:auto по спеке уводит и
   overflow-x в auto, потому тень-офсет .m-frame на десктопе гасим (её роль берёт
   полупрозрачный ::backdrop), иначе обрезанная тень мусорит по краю.
   Зазоры к сетке 4: flex-gap формы 10→8, паддинг m-body 6→4; описание ужато 96→80.
   Телефон (≤480) живёт своим fullscreen-блоком ниже (там шапка/футер приколоты). */
@media (min-width:481px){
  #task-dialog{max-height:94dvh; overflow-y:auto; overscroll-behavior:contain;}
  #task-dialog .m-frame{gap:8px; box-shadow:none;}
  #task-dialog .m-body{max-height:none; overflow:visible; padding-top:4px;}
  #task-dialog textarea#tm-desc{height:80px;}
}

/* ── ОТДЕЛЬНЫЙ ЭКРАН (не модалка): Telegram Mini App / телефоны ──
   на телефоне это самостоятельный экран поверх приложения, а не плавающая
   модалка: фон под ним не просвечивает и не скроллится. Экран ПРИКЛЕЕН к
   прямоугольнику visualViewport (--vv-*, ставит tmWireKeyboard по кадрам) —
   position:fixed поверх видимой зоны над клавиатурой. Пока переменных нет
   (клавы нет / нет JS) — полноэкранный фолбэк 100dvh. Именно приклейка, а не
   старое сжатие по --kb, держит экран над клавой без зазора: iOS-WKWebView при
   фокусе поля пан-скроллит вьюпорт, и фикс-top:0 открывал доску снизу. */
@media (max-width:480px){
  #task-dialog::backdrop{
    background:#FAF7EE;           /* литеральный фолбэк: старый WebKit не резолвит var() на ::backdrop */
    background:var(--paper);
    background-image:radial-gradient(var(--paper-dot) 1px, transparent 1.2px);
    background-size:24px 24px;    /* та же точечная бумага, что и .m-frame — шов под клавой бесшовный */
  }
  #task-dialog{
    position:fixed; inset:auto;
    top:var(--vv-top, 0px); left:var(--vv-left, 0px);
    width:var(--vv-w, 100vw); max-width:var(--vv-w, 100vw);
    height:var(--vv-h, 100dvh); max-height:var(--vv-h, 100dvh);
    margin:0; padding:0;
  }
  #task-dialog .m-frame{
    width:100%; min-width:0; height:100%;
    display:flex; flex-direction:column; gap:0;
    /* gap:0 — на экране зазоры шапка→контент→футер задаём явно (padTop m-body,
       padding actions), а не невидимым flex-gap формы (был 10px и путал ритм) */
    border-radius:0; transform:none; box-shadow:none;
    padding:calc(10px + var(--safe-top, env(safe-area-inset-top))) 14px 0;
  }
  /* отдельный экран, не плавающая модалка → карандашной рамки-контура нет
     (её край и мелькал в зазоре, когда экран уезжал под клавиатурой) */
  #task-dialog .m-frame::before{display:none;}
  /* шапка .tmx-top — в потоке (не absolute): padding-top .m-frame уже учитывает
     safe-top, кнопки ←/✕ не уезжают под чёлку в TMA-fullscreen */
  /* зазор #1 (шапка→контент): полноширинная линия под шапкой уже скрыта
     глобально (см. #task-form > .tmx-rule выше) — контент начинается сразу */
  #task-dialog .m-body{
    flex:1; max-height:none;
    padding:4px 10px 10px; margin:0 -10px;
  }
  /* зазоры #2 (метка→заголовок) и #3 (заголовок→описание): ритм блока названия
     по сетке 4 — строка заголовка на scale-высоте 40 (уже 44, но кратно), линия
     под ним вплотную (mt:0), описание в 4 под линией → зазор #3 = 4+4+4 = 12,
     в общий 12-ритм. Все значения кратны 4. */
  /* на телефоне прячем описательную «название · пишет нейросеть» (иконка ✳
     остаётся) — трём подписям тесно; освобождаем место под «создано» + статус */
  #task-dialog .tmx-nlab{display:none;}
  #task-dialog .tmx-trow{min-height:40px;}
  #task-dialog .tmx-rule-in{margin-top:0;}
  #task-dialog .tmx-desc{margin-top:4px;}
  #task-dialog .actions{
    margin-top:0;
    padding:10px 0 calc(12px + var(--safe-bottom, env(safe-area-inset-bottom)));
  }
  .tm-pop .plbl{min-width:100%;}
  .tm-who-row{gap:20px;}
  .timg{width:64px; height:64px;}
  .mile-list{margin-left:12px; padding-left:12px;}
}

/* тап-цели на тач-экранах */
@media (pointer:coarse){
  .tm-seg button{padding:8px 13px;}
  .cl-check{width:24px; height:24px;}
  .cl-item .qty button{width:26px; height:26px;}
}

@media (prefers-reduced-motion:reduce){
  #task-dialog *{animation:none !important; transition:none !important;}
}