/* ═══════════════════════════════════════════════════════════
   НОВАЯ ЗАДАЧА — окно постановки (SPEC §8.9)
   ═══════════════════════════════════════════════════════════
   Окно по центру: задачу ставят с любого экрана и остаются на нём.
   Четыре вопроса сверху вниз, как в бланке: что, когда, что за дело,
   кому. Первая строка крупная — это заголовок дела, а не поле анкеты. */
.dlg-task{width:min(520px,calc(100vw - 32px));max-height:min(820px,calc(100dvh - 48px))}
.tq{display:flex;flex-direction:column;min-height:0}
.tq-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 12px 20px;border-bottom:1px solid var(--rule-2);
}
.tq-head b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tq-head span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.tq-body{padding:6px 20px 8px;overflow-y:auto;overscroll-behavior:contain}
.tq-title{
  width:100%;padding:12px 0 10px;border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  transition:border-color var(--t-tap) var(--ease);
}
.tq-title::placeholder{color:var(--ink-3);font-weight:500}
.tq-title:focus{outline:none;border-color:var(--ink)}
.tq-sec{padding-top:16px}
.tq-sec h3{
  margin-bottom:9px;font-size:11px;font-weight:500;
  color:var(--ink-2);
}

/* Когда: день обоймой, час рядом, и срок словами под ними — человек
   видит «через 2 ч 25 мин» до того, как нажал. */
.tq-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tq-days{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r);background:var(--sunk)}
.tq-chip{
  height:28px;padding:0 11px;border-radius:calc(var(--r) - 2px);font-size:12px;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.tq-chip.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.tq-chip:active{transform:scale(.97)}
.tq-date,.tq-time{width:auto;height:32px;padding:0 10px;font-size:12.5px}
.tq-time{width:96px}
.tq-say{margin-top:8px;font-size:12px;color:var(--ink-3)}

/* Род — плитки со значком: их пять, и выпадающий список прятал бы то,
   что и так помещается в строку. */
.tq-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tq-kind{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);
  font-size:12px;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);
}
.tq-kind svg{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .tq-kind:hover{border-color:var(--ink-3);color:var(--ink)}
}
.tq-kind.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tq-kind.on svg{color:var(--accent-ink)}
.tq-kind:active{transform:scale(.97)}
.tq-res{height:34px;padding:0 10px;font-size:12.5px}

/* Срочность — три штампа в ряд и последствие выбора рядом с ними. */
.tq-prio{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tq-stamp{
  height:26px;padding:0 9px;border:1px solid var(--rule);border-radius:var(--r-xs);background:var(--card);
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .tq-stamp:hover{border-color:var(--ink-3);color:var(--ink)}
}
.tq-stamp.on{border-color:var(--ink);color:var(--ink)}
.tq-stamp.p-urgent.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tq-stamp.p-low.on{border-style:dashed}
.tq-stamp:active{transform:scale(.97)}
.tq-prio-say{font-size:11.5px;color:var(--ink-3);margin-left:4px}

/* Кому — карточки людей смены: лицо, имя, роль. Отмеченная — чернилами,
   как всякая живая поверхность продукта. */
.tq-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tq-person{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:1px 10px;align-items:center;
  padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  text-align:left;
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .tq-person:hover{border-color:var(--ink-3)}
}
.tq-person:active{transform:scale(.985)}
.tq-person.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tq-av{
  grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;font-style:normal;
  color:var(--av-ink);background:var(--av,var(--stop));
}
.tq-person.none .tq-av{background:transparent;border:1px dashed var(--rule)}
.tq-person b{font-size:12.5px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-person span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-note{min-height:56px;padding:9px 11px;font-size:12.5px;line-height:1.45;resize:vertical}
.tq-foot{
  display:flex;gap:8px;justify-content:flex-end;padding:13px 20px;
  border-top:1px solid var(--rule);background:var(--paper);
}

/* ── назначить с листа ──
   Меню у имени в строке наряда: себе, людям смены, никому. Стоит там, где
   нажали, и закрывается щелчком мимо. */
.tk-whobox{position:relative;justify-self:end}
.tk-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;padding:6px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-3), inset 0 0 0 1px var(--rule);
  animation:tkMenu 200ms cubic-bezier(.2,.8,.2,1) both;transform-origin:top right;
}
@keyframes tkMenu{from{opacity:0;transform:scale(.96) translateY(-3px)}to{opacity:1;transform:none}}
.tk-menu .pop-l{padding:6px 8px 4px}
.tk-menu-i{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 9px;align-items:center;width:100%;
  padding:6px 8px;border-radius:var(--r-sm);text-align:left;font-size:12.5px;color:var(--ink-2);
}
@media (hover:hover) and (pointer:fine){
  .tk-menu-i:hover{background:var(--paper);color:var(--ink)}
}
.tk-menu-i.on{color:var(--ink);font-weight:550}
.tk-menu-i .tq-av{width:24px;height:24px;font-size:9px}
.tk-menu-i small{font-size:10.5px;color:var(--ink-3);margin-left:4px}
.tk-menu-i.none .tq-av{background:transparent;border:1px dashed var(--rule)}

@media (max-width:640px){ .tq-people{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .tk-menu{animation:none}
  .tq-kind:active,.tq-person:active,.tq-chip:active,.tq-stamp:active{transform:none}
}