/* A5 CRM — tasks.css (screen: Задачи). Owned by screens/tasks.js. Look: DESIGN-STRIPE.md §6.6, colours DESIGN-CALM.md,
   the list look the owner's pick of 2026-10-20 (DESIGN-CALM.md §9, «Лента»).
   Every class is prefixed tsk- (other screens define global .task/.day/.dl/.dr…).
   One toolbar line (views · «Все / Мои» · «Фильтр» + active filter pills · «…» … counts · «+ Задача ▾»), the list as
   full-width 60 px two-line rows in date groups (task over type | deal over client | due | manager, actions on hover),
   the week as a calendar of raised blocks with a type bar, the drawer / modal on the shared overlays.
   Every colour is a token of base.css, so both themes work. */

:root{
  --tsk-d1:var(--dur-1);--tsk-d2:var(--dur-2);--tsk-d3:var(--dur-3);--tsk-d4:var(--dur-4);--tsk-d5:var(--dur-5);
  --tsk-eo:var(--ease-out);
  --tsk-ei:var(--ease-in);
  --tsk-em:var(--ease-move);
  --tsk-lift:var(--shadow-3);
  --tsk-hover:var(--surface-hover);
}

/* ── layout: the toolbar line over the scrolling body ── */
.tsk{--tsk-pad:var(--page-pad);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0;position:relative}
.tsk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tsk-ctx{position:fixed;left:0;top:0;width:1px;height:1px;pointer-events:none}
.tsk-body{overflow:auto;position:relative;min-height:0;overscroll-behavior:contain}

/* ── toolbar: views · (week: ‹ Сегодня › range) · «Все / Мои» · «Фильтр» + the active filters · «…» … counts · «+ Задача ▾» ── */
.tsk-tb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0;padding:0 var(--tsk-pad) 20px}
.tsk-tb-sp{flex:1 1 0;min-width:0}
.tsk-count{font:var(--t-body);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tsk-count b{display:inline-block;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.tsk-count .red{color:var(--danger)}   /* quiet status: the red text alone, no 600 (as the overdue dates, DESIGN-CALM §1.6) */
/* «Все / Мои»: a segmented pair after a 1 px rule, so it does not read as part of the view switch */
.tsk-who{position:relative;margin-left:13px}
.tsk-who::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:1px;background:var(--border)}
.btn.tsk-ibtn{width:var(--control-h);padding:0}
.btn.tsk-ibtn .ic{width:16px;height:16px;stroke-width:2}
/* «Фильтр»: one control button; the number of active filters as a small grey count; each active filter = a pressed pill
   with its own × (types, «✦ Создано ИИ», the manager) */
.tsk-flt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.btn.tsk-fb{gap:6px}
.btn.tsk-fb .ic{width:16px;height:16px;stroke-width:2;color:var(--icon)}
.tsk-fbn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--surface-pressed);font:var(--t-caption-strong);color:var(--text-strong)}
.tsk-fc{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:999px;background:var(--surface-pressed);box-shadow:0 0 0 1px var(--border);font:var(--t-body-medium);color:var(--text-strong);white-space:nowrap}
.tsk-fc > .ic{width:14px;height:14px;stroke-width:2;color:var(--icon)}
.tsk-fc .av{width:18px;height:18px;font-size:9px}
.tsk-fc button{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--icon);transition:background-color var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tsk-fc button:hover{background:var(--surface-hover);color:var(--text-strong)}
.tsk-fc button:focus-visible{box-shadow:var(--focus-ring)}
.tsk-fc button .ic{width:12px;height:12px;stroke-width:2.4}
.tsk .ic.tsk-aic{color:var(--ai-text)}   /* the ✦ of «Создано ИИ» stays violet (§3.13) */
.tsk-reset{flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text-3);white-space:nowrap;transition:color var(--tsk-d1) linear}   /* ghost action (DESIGN-CALM §3.10) */
.tsk-reset:hover{color:var(--text-strong)}
.tsk-reset:focus-visible{box-shadow:var(--focus-ring)}
.tsk-reset .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon);transition:color var(--tsk-d1) linear}
.tsk-reset:hover .ic{color:var(--text-strong)}

/* week navigation (week view only): ‹ Сегодня › · range · «Неделя 42» */
.tsk-wnav{display:flex;align-items:center;gap:8px;min-width:0}
.tsk-wnav .btn.sm{height:var(--control-h);font:var(--t-body-strong)}
.tsk-wlabel{margin-left:8px;font:var(--t-heading-s);color:var(--text-strong);white-space:nowrap}
.tsk-wnav .lbl{font:var(--t-body);color:var(--text-3);white-space:nowrap}

/* ══════════ LIST ══════════ */
.tsk-list{padding:0 var(--tsk-pad) 40px}

/* date group: a heading line, no band — the name 16/24 600, the count as a plain number
   (overdue: --danger 600), the range --text-3; it sticks to the top while its rows scroll under it */
.tsk-g{position:relative}
.tsk-g + .tsk-g{margin-top:20px}
.tsk-gh{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 4px;background:var(--bg)}
.tsk-gt{display:inline-flex;align-items:center;gap:8px;height:32px;min-width:0;padding:0 8px;border-radius:var(--radius-s);color:var(--text-strong)}
.tsk-gt:focus-visible{box-shadow:var(--focus-ring)}
.tsk-gt b{font:var(--t-heading-s);white-space:nowrap}
.tsk-gt .lbl{font:var(--t-body);color:var(--text-3);white-space:nowrap}
.tsk-chev{width:12px;height:12px;flex:none;color:var(--text-3);transition:transform var(--tsk-d3) var(--tsk-eo),color var(--tsk-d1)}
.tsk-gt:hover .tsk-chev{color:var(--text-strong)}
.tsk-g:not(.is-collapsed) .tsk-chev{transform:rotate(90deg)}
.tsk-n{display:inline-block;overflow:hidden;font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.tsk-n i{display:inline-block;font-style:normal}
.tsk-g[data-g="overdue"] .tsk-n{color:var(--danger);font-weight:600}
.tsk-ga{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px;border-radius:var(--radius-s);font:var(--t-body-strong);color:var(--text-3);white-space:nowrap;transition:color var(--tsk-d1) linear}   /* ghost action (DESIGN-CALM §3.10) */
.tsk-ga:hover{color:var(--text-strong)}
.tsk-ga:focus-visible{box-shadow:var(--focus-ring)}
.tsk-ga .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon);transition:color var(--tsk-d1) linear}
.tsk-ga:hover .ic{color:var(--text-strong)}
.tsk-gb{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--tsk-d4) var(--tsk-em)}
.tsk-g.is-collapsed .tsk-gb{grid-template-rows:0fr}
.tsk-gi{min-height:0;overflow:hidden}

/* row: full width, 60 px, two lines, no dividers; hover / selection = a rounded tile (as the inbox rows).
   check | title over «type · ✦ ИИ» | deal over client | due | manager. The actions («✦ Сделать», «Перенести», «…») sit in
   the deal cell's grid area, at its right end, over a fade of the row fill (--rowbg), shown on hover / focus / selection */
.tsk-r{--rowbg:var(--bg);position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) minmax(160px,min(26%,340px)) 150px 24px;grid-template-areas:"ck main dl du ow";align-items:center;column-gap:16px;height:60px;padding:0 12px;border-radius:var(--radius-m);
  font:var(--t-body);color:var(--text);cursor:pointer;scroll-margin-top:52px;scroll-margin-bottom:12px;
  transition:background-color var(--tsk-d1) linear,height var(--tsk-d5) var(--tsk-em),opacity var(--tsk-d3) var(--tsk-ei)}
.tsk-r > *{min-width:0}
.tsk-r:hover{--rowbg:var(--tsk-hover);background:var(--rowbg)}
/* the task open in the drawer = the selected grey, one step above hover (DESIGN-CALM §1.2) */
.tsk-r.is-sel,.tsk-r.is-sel:hover{--rowbg:var(--row-selected);background:var(--rowbg)}
.tsk-r.is-collapsing{height:0;opacity:0;overflow:hidden;pointer-events:none}
/* row focus: the shared row outline (components.css, §5.12) */

/* round check (§5.6, DESIGN-CALM §3.11): 18 px, keyline; hover = the hover keyline + a grey tick preview; done = accent fill */
.tsk-c0{grid-area:ck;display:grid;place-items:center}
.tsk-ck{position:relative;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--control-border);display:grid;place-items:center;
  transition:box-shadow var(--tsk-d2) var(--tsk-eo),background-color var(--tsk-d2) var(--tsk-eo),transform var(--tsk-d1)}
.tsk-ck::before{content:"";position:absolute;inset:-8px;border-radius:50%}   /* 34 px hit area */
.tsk-ck svg{position:relative;width:11px;height:11px;fill:none;stroke:var(--text-3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:21;stroke-dashoffset:21;opacity:0;transition:stroke-dashoffset var(--tsk-d3) var(--tsk-eo),opacity var(--tsk-d2) linear}
.tsk-ck:hover{box-shadow:0 0 0 1px var(--control-border-hover)}
.tsk-ck:hover svg{stroke-dashoffset:0;opacity:.5}
.tsk-ck:focus-visible{outline:var(--focus-outline);outline-offset:2px}
.tsk-ck:active{transform:scale(.9)}
.tsk-r.is-checked .tsk-ck,.tsk-r.is-done .tsk-ck{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tsk-r.is-checked .tsk-ck svg,.tsk-r.is-done .tsk-ck svg{stroke:var(--on-accent);stroke-dashoffset:0;opacity:1}
.tsk-r.is-checked .tsk-ck{animation:tsk-pop 260ms var(--tsk-eo)}
.tsk-r.is-done .tsk-ck:hover{background:var(--surface);box-shadow:0 0 0 1px var(--control-border-hover)}
.tsk-r.is-done .tsk-ck:hover svg{stroke:var(--text-3)}
@keyframes tsk-pop{0%{transform:scale(.82)}55%{transform:scale(1.08)}100%{transform:scale(1)}}

.tsk-tc{grid-area:main;display:grid;gap:3px;min-width:0}
.tsk-tx{flex:0 1 auto;display:inline-block;max-width:100%;justify-self:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-medium);color:var(--text-strong);
  background:linear-gradient(currentColor,currentColor) 0 58%/0 1px no-repeat;
  transition:background-size var(--tsk-d3) var(--tsk-eo),color var(--tsk-d3) linear}
.tsk-r.is-checked .tsk-tx,.tsk-r.is-done .tsk-tx{background-size:100% 1px;color:var(--text-3)}
/* the second line: type, the deal (with its channel glyph), the client when it is not the deal's own name, «✦ ИИ» */
.tsk-l2{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden;white-space:nowrap;font:var(--t-caption);color:var(--text-3)}
.tsk-l2 > *{flex:none}
.tsk-mty,.tsk-mdl{display:inline-flex;align-items:center;gap:5px}
.tsk-l2 > .tsk-mdl{flex:0 1 auto;min-width:0;overflow:hidden}
.tsk-l2 .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.tsk-l2 .ic.tsk-wa{color:var(--wa)}
.tsk-mdl a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:400;color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--tsk-d1) linear,text-decoration-color var(--tsk-d1) linear}
.tsk-mdl a:hover{color:var(--text-strong);text-decoration-color:var(--border-strong)}
.tsk-mcl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text-3)}
/* «✦ ИИ» is a mark, not a tag (DESIGN-CALM §1.6, §3.7): the ✦ in the muted AI violet, the word in --text-3 */
.tsk-aib{flex:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font:var(--t-caption);color:var(--text-3)}
.tsk-aib .ic{width:12px;height:12px;stroke-width:2.4;color:var(--ai-text)}
.tsk-l2 .tsk-aib .ic{color:var(--ai-text)}
.tsk-r.is-done .tsk-aib .ic,.tsk-r.is-checked .tsk-aib .ic{color:var(--icon)}
.tsk-none{color:var(--text-3)}
/* the deal column: the deal with its channel glyph over the client (when it is not the deal's own name);
   on a narrow #view it folds back into the second line of the task (.tsk-l2 .tsk-mdl, hidden while the column shows) */
.tsk-rd{grid-area:dl;display:grid;gap:3px;min-width:0}
.tsk-rd1{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.tsk-rd1 .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.tsk-rd1 .ic.tsk-wa{color:var(--wa)}
.tsk-rd1 a{min-width:0;overflow:hidden;text-overflow:ellipsis;font:var(--t-body);color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--tsk-d1) linear,text-decoration-color var(--tsk-d1) linear}
.tsk-rd1 a:hover{color:var(--text-strong);text-decoration-color:var(--border-strong)}
.tsk-rd2{padding-left:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption);color:var(--text-3)}
.tsk-l2 .tsk-mdl{display:none}
.tsk-r.is-done :is(.tsk-rd1 a,.tsk-rd2){color:var(--text-3)}
.tsk-du{grid-area:du;justify-self:end;display:flex;align-items:center;gap:4px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tsk-du .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.tsk-r.is-over .tsk-du{color:var(--danger)}   /* quiet: the red text alone, weight 400 (DESIGN-CALM §4 G6) */
.tsk-r.is-done :is(.tsk-du,.tsk-l2,.tsk-mdl a){color:var(--text-3)}
.tsk-ow{grid-area:ow;display:flex;align-items:center}
.tsk-ow .av{width:24px;height:24px;font-size:10px}
.tsk-r.is-done .tsk-ow .av{opacity:.5}

.tsk-ac{grid-area:dl;justify-self:end;align-self:center;z-index:1;display:flex;align-items:center;gap:2px;padding-left:36px;
  background:linear-gradient(to right,transparent,var(--rowbg) 32px);opacity:0;pointer-events:none;transition:opacity var(--tsk-d2) var(--tsk-eo)}
.tsk-r:is(:hover,:focus-within,:focus-visible,.is-sel) .tsk-ac,.tsk-ac:has([aria-expanded="true"]){opacity:1;pointer-events:auto}
.tsk-ai{display:inline-flex;align-items:center;gap:4px;height:28px;margin-right:4px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--border);background:var(--surface);transition:color var(--tsk-d1) linear,box-shadow var(--tsk-d1) linear}
.tsk-ai span{font-size:12px;line-height:1}
.tsk-ai > span[aria-hidden]{color:var(--ai-text)}
.tsk-ai:hover{color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--border-strong)}
.tsk-ai:focus-visible{box-shadow:var(--focus-ring)}
.tsk-ib{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:background-color var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tsk-ib .ic{width:16px;height:16px;stroke-width:2}
.tsk-ib:hover,.tsk-ib[aria-expanded="true"]{background:var(--surface-offset-hover);color:var(--text-strong)}
.tsk-ib:focus-visible{box-shadow:var(--focus-ring)}

@keyframes tsk-flash{from{background-color:var(--flash-bg)}}
.tsk-r.tsk-flash{animation:tsk-flash 1.2s var(--tsk-eo)}

/* empty (page empty state of components.css) */
.tsk-zero > .ic{color:var(--success)}
.tsk-empty-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}


@keyframes tsk-fade{from{opacity:0}}
.tsk-swap{animation:tsk-fade 160ms var(--tsk-eo)}

/* ══════════ WEEK (calendar from Stripe parts) ══════════ */
.tsk-wk{position:relative;min-width:calc(var(--gut) + 7 * 112px + 2 * var(--tsk-pad));padding:0 var(--tsk-pad) 32px}
.tsk-wk-h{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:var(--gut) repeat(7,minmax(0,1fr));height:52px;background:var(--bg);box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.tsk-wk-h .tsk-gh0{position:sticky;left:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;padding:0 8px 0 0;background:var(--bg);box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft);font:var(--t-caption);color:var(--text-3)}
.tsk-dh{position:relative;display:flex;align-items:center;gap:4px;min-width:0;padding:0 6px 0 8px;border-left:1px solid var(--border-soft);white-space:nowrap}
.tsk-dh .lbl{font:var(--t-caption-strong);color:var(--text-3)}
.tsk-dh b{font:var(--t-metric-s);color:var(--text-strong);font-variant-numeric:tabular-nums}
.tsk-dh.is-past b{color:var(--text-3)}
/* today: the number in a 28 px soft-tint circle (an attention counter, DESIGN-CALM §3.6), «Сегодня» in --text-strong */
.tsk-dh.is-today b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 3px;border-radius:999px;background:var(--accent-bg-2);color:var(--accent-soft-text);font:400 16px/1 var(--font-sans);letter-spacing:normal;font-variant-numeric:tabular-nums}
.tsk-dh .tsk-tdy{font:var(--t-caption-strong);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis}
.tsk-dn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;flex:none;
  font:var(--t-caption-strong);font-variant-numeric:tabular-nums;background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.tsk-dn.is-over{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}

.tsk-wk-grid{position:relative;display:grid;grid-template-columns:var(--gut) repeat(7,minmax(0,1fr));height:calc(12 * var(--hour));margin-top:12px;border-bottom:1px solid var(--border-soft)}
.tsk-gut{position:sticky;left:0;z-index:5;background:var(--bg)}
.tsk-gut span{position:absolute;right:8px;transform:translateY(-50%);font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* hour lines solid, half-hour lines dashed (a masked layer), both --border-soft */
.tsk-dc{position:relative;border-left:1px solid var(--border-soft);cursor:pointer;
  background-image:linear-gradient(to bottom,var(--border-soft) 0,var(--border-soft) 1px,transparent 1px);
  background-size:100% var(--hour);transition:background-color var(--tsk-d2) linear}
.tsk-dc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to bottom,transparent calc(50% - .5px),var(--border-soft) calc(50% - .5px),var(--border-soft) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:100% var(--hour);
  -webkit-mask-image:repeating-linear-gradient(to right,currentColor 0 4px,transparent 4px 8px);mask-image:repeating-linear-gradient(to right,currentColor 0 4px,transparent 4px 8px)}
.tsk-dc.is-past{background-color:var(--surface-offset)}
.tsk-dc.is-target{background-color:var(--accent-bg)}
.tsk-past{display:none}   /* the elapsed-hours overlay of today is deleted (§6.6); the now-line marks the time */

/* hover target slot (click = new task at that time) */
.tsk-slot{position:absolute;left:3px;right:3px;z-index:1;height:calc(var(--hour) / 2 - 1px);margin-top:1px;display:flex;align-items:center;gap:4px;padding:0 6px;
  border:1px dashed var(--accent);border-radius:var(--radius-s);background:var(--accent-bg);color:var(--text-strong);font:var(--t-caption-strong);font-variant-numeric:tabular-nums;
  pointer-events:none;opacity:0;transition:opacity var(--tsk-d2) linear,top var(--tsk-d1) linear}
.tsk-slot.on{opacity:1}
.tsk-slot .ic{width:12px;height:12px;stroke-width:2.4}

/* event blocks: raised card, r6, a straight 3 px type bar on the left (::before; overflow:hidden rounds only its outer corners) */
.tsk-blk{--bar:var(--text-3);position:absolute;z-index:2;display:flex;flex-direction:column;gap:0;padding:4px 8px 4px 11px;border-radius:var(--radius-s);background:var(--surface-card);
  box-shadow:var(--shadow-1);font:var(--t-caption);color:var(--text-strong);overflow:hidden;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:box-shadow var(--tsk-d1) linear,opacity var(--tsk-d3) linear}
.tsk-blk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bar);pointer-events:none}
/* type bars = Attio's status-dot hues (DESIGN-CALM §4 G6); overdue = the red dot hue on the bar alone (no red keyline,
   no red header), so the card keeps the plain card edge */
.tsk-blk.t-reply{--bar:var(--dot-sky)}
.tsk-blk.t-call{--bar:var(--dot-purple)}
.tsk-blk.t-measure{--bar:var(--dot-orange)}
.tsk-blk.t-meeting{--bar:var(--dot-green)}
.tsk-blk.t-document{--bar:var(--text-3)}
.tsk-blk:hover{z-index:3;box-shadow:var(--shadow-hover)}
.tsk-blk.is-over{--bar:var(--dot-red)}
/* overdue also carries a 6 px red status dot before the start time: a shape cue next to the red bar, so overdue does not rest
   on the bar hue alone (red vs the orange «Замер» bar look alike to protan / deutan eyes, WCAG 1.4.1). The time stays neutral
   (status dots sit next to a neutral label, DESIGN-CALM §3.7; the 6 px dot as G7 .rp-insi.bad) */
.tsk-blk.is-over .tsk-blk-tm::before{content:"";display:inline-block;width:6px;height:6px;margin:0 4px 0 0;border-radius:50%;background:var(--dot-red);vertical-align:1px}
/* done = colours, not 50 % opacity (that put the title at 3.27:1, the time at 2.1:1 and the check under 3:1): title, time and
   client --text-3 (≥ 5.2:1 on the card) with the line-through, the check glyph in full --accent-text, a neutral bar */
.tsk-blk.is-done{--bar:var(--dot-neutral)}
.tsk-blk.is-done .tsk-blk-t{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--text-3)}
.tsk-blk.is-done .tsk-blk-h .ic{color:var(--accent-text)}   /* the done check glyph: one blue for every done check (§3.11) */
.tsk-blk.is-sel,.tsk-blk.is-sel:hover{z-index:4;box-shadow:0 0 0 1px var(--text-3),var(--shadow-1)}   /* neutral 1 px (§3.5) */
.tsk-blk.tsk-blk:focus-visible{z-index:4;box-shadow:var(--focus-ring)}
.tsk-blk-h{display:flex;align-items:center;gap:4px;min-width:0;padding-right:16px;color:var(--text-3)}
.tsk-blk-h .ic{flex:none;width:12px;height:12px;stroke-width:2.4}
.tsk-blk-tm{font:var(--t-caption);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsk-blk-ai{flex:none;color:var(--ai-text);font-size:11px;line-height:1}
.tsk-blk-t{font-weight:600;color:var(--text-strong);overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--lines,2);-webkit-box-orient:vertical;overflow-wrap:anywhere}
.tsk-blk-t.one{display:block;white-space:nowrap;text-overflow:ellipsis}
.tsk-blk-s{color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsk-blk.is-sm{flex-direction:row;align-items:center;gap:6px;padding-top:0;padding-bottom:0}
.tsk-blk.is-sm .tsk-blk-h{flex:0 1 auto;min-width:0;padding-right:0}   /* the title (basis 0) gives way first, then the time ends in an ellipsis */
.tsk-blk.is-sm .tsk-blk-t{display:block;flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis}
.tsk-blk.is-sm:hover .tsk-blk-t{padding-right:16px}
/* narrow lanes, by the block's content box [E]: the end time («–16:00») goes first (< 102 px), then the one-line title of a
   short block (< 80), then the room kept for the hover check (< 64), then the type icon (< 48), so the start time stays
   whole instead of «1…»; whatever still does not fit ends in an ellipsis */
.tsk-blk{container:tskb / inline-size}
@container tskb (max-width:101px){ .tsk-blk-te{display:none} }
@container tskb (max-width:79px){ .tsk-blk.is-sm .tsk-blk-t{display:none} }
@container tskb (max-width:63px){ .tsk-blk-h{padding-right:0} .tsk-blk-ai{display:none} }   /* the ✦ gives way before the start time is cut */
@container tskb (max-width:47px){ .tsk-blk-h > .ic{display:none} }
/* an overdue block's red dot takes 10 px more [E: «10:00» 34 px, dot + gap 10, ✦ 9, icon 12 + 4, hover room 16], so the same
   steps come 10-12 px earlier there and the start time stays whole */
@container tskb (max-width:111px){ .tsk-blk.is-over .tsk-blk-te{display:none} }
@container tskb (max-width:88px){ .tsk-blk.is-over .tsk-blk-ai{display:none} }
@container tskb (max-width:75px){ .tsk-blk.is-over .tsk-blk-h{padding-right:0} }
@container tskb (max-width:59px){ .tsk-blk.is-over .tsk-blk-h > .ic{display:none} }
.tsk-blk-ck{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:var(--surface-card);box-shadow:0 0 0 1px var(--control-border);display:grid;place-items:center;opacity:0;
  transition:opacity var(--tsk-d2) var(--tsk-eo),box-shadow var(--tsk-d1) linear,transform var(--tsk-d1)}
.tsk-blk.is-sm .tsk-blk-ck{top:50%;margin-top:-8px}
.tsk-blk-ck svg{width:10px;height:10px;fill:none;stroke:var(--text-3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--tsk-d1) linear}
.tsk-blk:hover .tsk-blk-ck,.tsk-blk:focus-visible .tsk-blk-ck{opacity:1}
.tsk-blk-ck:hover{box-shadow:0 0 0 1px var(--control-border-hover)}
.tsk-blk-ck:hover svg{opacity:.5}
.tsk-blk-ck:focus-visible{opacity:1;outline:var(--focus-outline);outline-offset:2px}
.tsk-blk-ck:active{transform:scale(.9)}
.tsk-blk-rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.tsk-blk-rs::after{content:"";position:absolute;left:50%;bottom:2px;width:16px;height:2px;margin-left:-8px;border-radius:1px;background:var(--border-strong);opacity:0;transition:opacity var(--tsk-d2) linear}
.tsk-blk:hover .tsk-blk-rs::after{opacity:1}

/* drag & resize */
.tsk-blk.is-origin,.tsk-blk.is-origin:hover{opacity:.35;box-shadow:none;outline:1px dashed var(--border-strong);outline-offset:-1px}
.tsk-blk.is-origin::before,.tsk-blk.is-origin .tsk-blk-ck,.tsk-blk.is-origin .tsk-blk-rs{display:none}
.tsk-blk.is-ghost{z-index:20;opacity:1;cursor:grabbing;pointer-events:none;transform:scale(1.02);
  box-shadow:var(--tsk-lift);
  transition:top 90ms var(--tsk-eo),left 120ms var(--tsk-eo),width 120ms var(--tsk-eo)}
.tsk-blk.is-ghost .tsk-blk-h,.tsk-blk.is-ghost .tsk-blk-tm{color:var(--text-strong)}
.tsk-blk.is-ghost.is-past{box-shadow:0 0 0 1px var(--danger),var(--tsk-lift)}
.tsk-blk.is-ghost.is-past .tsk-blk-tm{color:var(--danger)}
.tsk-blk.is-resizing,.tsk-blk.is-resizing:hover{z-index:20;box-shadow:var(--tsk-lift)}
.tsk-blk.is-resizing .tsk-blk-tm{color:var(--text-strong)}
body.tsk-dragging,body.tsk-dragging *{cursor:grabbing!important;user-select:none!important}
body.tsk-resizing,body.tsk-resizing *{cursor:ns-resize!important;user-select:none!important}
@keyframes tsk-settle{from{transform:scale(1.035)}}
@keyframes tsk-flash-b{from{background-color:var(--flash-bg)}}
.tsk-blk.tsk-settle{animation:tsk-settle var(--tsk-d4) var(--tsk-eo)}
.tsk-blk.tsk-flash{animation:tsk-flash-b 1.2s var(--tsk-eo)}
.tsk-blk.tsk-settle.tsk-flash{animation:tsk-settle var(--tsk-d4) var(--tsk-eo),tsk-flash-b 1.2s var(--tsk-eo)}

/* «+N» chip (spec silent; lane cap of tasks.js, LANES / KEEP / MOREW): when more tasks overlap than LANES (3) lanes hold,
   the cluster keeps one lane of blocks, wide enough to read, and this neutral .count starts 6 px after it, in a 44 px
   column at the right, at the time the hidden tasks start; a click lists them in a menu [E: Stripe has no week calendar;
   calendars cap lanes with a «+N» chip] */
.tsk-more{position:absolute;z-index:2;cursor:pointer;transition:box-shadow var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tsk-more:hover,.tsk-more[aria-expanded="true"]{color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--border-strong)}
.tsk-more:focus-visible{box-shadow:var(--focus-ring)}
.tsk-more:active{transform:scale(.96)}
.tsk-more.tsk-flash{animation:tsk-flash-b 1.2s var(--tsk-eo)}
.mi.tsk-mi-over .hint{color:var(--danger)}   /* overdue times in the chip menu: 4.85 / 5.54 on the menu row hover (calm §2.4); the dark badge text would read near-white */

/* now-line: drawn under the blocks; week-wide 1 px --danger at 32 %, today a 2 px segment with an 8 px dot; label = small danger badge */
.tsk-now{position:absolute;left:var(--gut);right:0;height:0;z-index:1;border-top:1px solid var(--danger-line);pointer-events:none}
.tsk-now i{position:absolute;top:-1.5px;height:2px;background:var(--danger)}
.tsk-now i::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tsk-gut .tsk-nowl{position:absolute;right:4px;z-index:1;transform:translateY(-50%);height:16px;padding:0 4px;border-radius:var(--radius-xs);
  background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border);font:600 11px/16px var(--font-sans);font-variant-numeric:tabular-nums}
/* an hour label closer than 20 px to the now badge (8 + 8 half-heights + 4 px air) is hidden whole by tasks.js (drawWeek /
   updateNow set .is-near), so no label is ever cut in half [E] */
.tsk-gut span.is-near{visibility:hidden}

/* overlay empty state on the grid (§5.24 #4) */
.tsk-wk-empty{position:absolute;left:calc(var(--gut) + (100% - var(--gut)) / 2);top:36%;z-index:1;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;width:max-content;max-width:360px;padding:16px 20px;
  border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-1);text-align:center;font:var(--t-body);color:var(--text-3);pointer-events:none}
.tsk-wk-empty b{font:var(--t-heading-s);color:var(--text-strong)}

/* week change: grid slides 16px in the direction of travel */
@keyframes tsk-in-l{from{opacity:0;transform:translateX(-16px)}}
@keyframes tsk-in-r{from{opacity:0;transform:translateX(16px)}}
.tsk-wk.in-l .tsk-dc,.tsk-wk.in-l .tsk-dh{animation:tsk-in-l var(--tsk-d3) var(--tsk-eo)}
.tsk-wk.in-r .tsk-dc,.tsk-wk.in-r .tsk-dh{animation:tsk-in-r var(--tsk-d3) var(--tsk-eo)}

/* ══════════ DRAWER (task details, 572) ══════════ */
.tsk-drawer .drawer-h .tsk-saved{margin-left:auto}
.tsk-drawer .drawer-h > .x{margin-left:0}
.tsk-dr-nav{margin-left:8px}
.tsk-dr{display:grid;gap:32px}
/* the shared entrance (components.css .drawer-b > *{animation:ui-rise … both}) leaves transform:translateY(0) on .tsk-dr after
   it ends; any transform makes .tsk-dr the containing block of the position:fixed deal list («Сменить сделку»), which then
   opened 888 px to the right, off-screen. «backwards» keeps the entrance and drops the transform when it ends */
.drawer-b > .tsk-dr{animation-fill-mode:backwards}
.tsk-dr.tsk-fade{animation:tsk-fade 140ms var(--tsk-eo)}
.tsk-dr-st{display:flex;flex-wrap:wrap;gap:6px}
/* status pills = pastel tags (§5.10, DESIGN-CALM §3.7): upcoming neutral, today info, overdue danger, done success;
   AI = neutral with the ✦ glyph in --ai-text */
.tsk-pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--radius-xs);white-space:nowrap;font:var(--t-caption-strong);
  background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.tsk-pill .ic{width:12px;height:12px;stroke-width:2.4}
.tsk-pill.today{background:var(--badge-info-bg);color:var(--badge-info-text);box-shadow:inset 0 0 0 1px var(--badge-info-border)}
.tsk-pill.red{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.tsk-pill.red .ic{color:var(--danger)}
.tsk-pill.ok{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.tsk-pill.ai .ic{color:var(--ai-text)}
/* title: 20/28 700, borderless until hover / focus */
.tsk-dr-title{display:block;width:calc(100% + 16px);min-height:0;margin:-4px -8px;padding:4px 8px;border:0;border-radius:var(--radius-s);outline:0;resize:none;overflow:hidden;background:transparent;box-shadow:none;
  font:var(--t-heading);color:var(--text-strong);transition:background-color var(--tsk-d1) linear,box-shadow var(--tsk-d1) linear}
.tsk-dr-st + .tsk-dr-title{margin-top:-24px}
.tsk-dr-title:hover{background:var(--surface-hover-raised)}
.tsk-dr-title:focus{background:var(--surface-raised);box-shadow:var(--focus-ring)}
/* the description under the title: borderless body text until hover / focus, as the title */
.tsk-dr-note{display:block;width:calc(100% + 16px);min-height:0;margin:-24px -8px 0;padding:4px 8px;border:0;border-radius:var(--radius-s);outline:0;resize:none;overflow:hidden;background:transparent;box-shadow:none;
  font:var(--t-body);color:var(--text);transition:background-color var(--tsk-d1) linear,box-shadow var(--tsk-d1) linear}
.tsk-dr-note::placeholder{color:var(--text-3)}
.tsk-dr-note:hover{background:var(--surface-hover-raised)}
.tsk-dr-note:focus{background:var(--surface-raised);box-shadow:var(--focus-ring)}
.tsk-dr-deal{display:grid;gap:8px;justify-items:start}
/* deal link card = bordered card */
.tsk-deal{justify-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-m);background:transparent;color:var(--text);transition:border-color var(--tsk-d1) linear}
.tsk-deal b{font:var(--t-body-strong);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tsk-deal small{grid-column:1;font:var(--t-body);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tsk-deal .ic{grid-column:2;grid-row:1/3;width:16px;height:16px;stroke-width:2;color:var(--icon);transition:color var(--tsk-d1) linear}
.tsk-deal:hover{border-color:var(--border-strong)}
.tsk-deal:hover .ic{color:var(--text-strong)}
.tsk-deal:focus-visible{box-shadow:var(--focus-ring)}
/* «Открыть переписку», «Сменить сделку» = record link (DESIGN-CALM §3.10): --text-strong with a light underline */
.tsk-lnk{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text-strong);
  text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--tsk-d1) linear,text-decoration-color var(--tsk-d1) linear}
.tsk-lnk:hover{text-decoration-color:var(--text-3)}
.tsk-lnk:focus-visible{box-shadow:var(--focus-ring)}
.tsk-lnk .ic{width:12px;height:12px;stroke-width:2.4}
/* «Почему эта задача»: grey info card; on the raised drawer it takes the raised hover fill so it shows in dark too */
.tsk-why{display:grid;gap:8px;justify-items:start;padding:16px;border-radius:var(--radius-m);background:var(--surface-hover-raised)}
.tsk-why .lbl{display:flex;align-items:center;gap:6px;font:var(--t-caption-strong);color:var(--text-2)}   /* AI label: neutral text, the ✦ in --ai-text (§3.13) */
.tsk-why .lbl .ic{width:12px;height:12px;stroke-width:2.4;color:var(--ai-text)}
.tsk-why p{margin:0;font:var(--t-body);color:var(--text)}
.tsk-why blockquote{margin:0;padding:0 0 0 12px;border-left:2px solid var(--border);font:var(--t-body);color:var(--text-2)}
.tsk-why blockquote small{display:block;margin-top:4px;font:var(--t-caption);color:var(--text-3)}
/* other tasks of the deal: a mini table */
.tsk-oth{display:grid;box-shadow:inset 0 1px 0 var(--border-soft)}
.tsk-oth-r{display:flex;align-items:center;gap:8px;height:var(--row-h);padding:0 8px;border-bottom:1px solid var(--border-soft);text-align:left;font:var(--t-body);color:var(--text);transition:background-color var(--tsk-d1) linear}
.tsk-oth-r .ic{flex:none;width:16px;height:16px;stroke-width:2;color:var(--icon)}
.tsk-oth-r .tt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tsk-oth-r small{flex:none;font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.tsk-oth-r.is-over small{color:var(--danger)}   /* 400, as the list dates; 4.85 / 5.54 on --surface-hover-raised, so no hover fallback (calm §2.4) */
.tsk-oth-r:hover{background:var(--surface-hover-raised)}
.tsk-oth-r:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.tsk-dr-f{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:20px;box-shadow:inset 0 1px 0 var(--border);background:var(--surface-raised)}
.tsk-saved{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font:var(--t-caption);color:var(--text-3);opacity:0;transform:translateY(2px);transition:opacity var(--tsk-d3) var(--tsk-eo),transform var(--tsk-d3) var(--tsk-eo)}
.tsk-saved.on{opacity:1;transform:none}
.tsk-saved .ic{width:12px;height:12px;stroke-width:2.4;color:var(--success)}
/* footer order [S overlays/drawer-automation.jpg; §5.19 .drawer-f flex-end]: «Удалить» (ghost --danger) at the left end,
   [«Открыть сделку»][primary «Отметить выполненной» / «Вернуть в работу»] at the right, the main action right-most */
.btn.tsk-del{order:-1;margin:0 auto 0 0;width:var(--control-h);padding:0;color:var(--danger)}
.tsk-dr-f [data-dact="toggle"]{order:2}
.btn.tsk-del .ic{width:16px;height:16px;stroke-width:2}

/* ── form pieces shared by the drawer and the «+ Задача» modal ── */
.tsk-f{display:grid;gap:8px;min-width:0}
.tsk-f > .lbl{display:block;font:var(--t-body-strong);color:var(--text-title)}
.tsk-in{width:100%}   /* look: the shared standalone control (components.css §5.3); .tsk-in-lg = .input.lg there too */
/* type / owner choices = segmented controls (§5.9); selected = the pressed grey button (DESIGN-CALM §3.3 «seg selected») */
.tsk-types,.tsk-owners{display:flex;flex-wrap:wrap;gap:8px}
.tsk-type,.tsk-own{height:var(--control-h);padding:0 8px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-s);white-space:nowrap;
  background:var(--btn-bg);font:var(--t-body-strong);color:var(--text-2);box-shadow:var(--shadow-control),0 0 0 1px var(--border);transition:box-shadow var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tsk-type .ic{width:12px;height:12px;stroke-width:2.4}
.tsk-type:hover,.tsk-own:hover{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong);color:var(--text-strong)}
.tsk-type.on,.tsk-own.on{background:var(--surface-pressed);color:var(--text-strong);box-shadow:0 0 0 1px var(--border)}
.tsk-type.on:hover,.tsk-own.on:hover{box-shadow:0 0 0 1px var(--border-strong)}
.tsk-type:focus-visible,.tsk-own:focus-visible,.tsk-type.on:focus-visible,.tsk-own.on:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.tsk-own{padding-left:4px}
.tsk-own .av{width:20px;height:20px;font-size:9px}
.tsk-own small{font:var(--t-caption);color:var(--text-3)}
.tsk-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tsk-when .tsk-in[type="date"]{width:152px}
.tsk-when .tsk-in[type="time"]{width:104px}
.tsk-durl{font:var(--t-body);color:var(--text-3);white-space:nowrap}
/* quick due chips = filter pills (§5.11) */
.tsk-qs{display:flex;flex-wrap:wrap;gap:6px}
.tsk-q{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px dashed var(--border);border-radius:var(--radius-pill);background:transparent;white-space:nowrap;
  font:var(--t-caption-strong);color:var(--text-2);transition:background-color var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tsk-q small{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.tsk-q:hover{border-style:solid;background:var(--surface-hover-raised);color:var(--text-strong)}
.tsk-q:active{background:var(--surface-pressed)}
.tsk-q:focus-visible{box-shadow:var(--focus-ring)}

/* ══════════ «Новая задача» as Linear's «New issue» (tasks.js openNewTask, .tnm-*; owner, 2026-10-20, DESIGN-CALM §10) ══════════
   [M Linear web «New issue»]: the window high on the screen, a small crumb header, a borderless title and description,
   one row of small property pills, the foot = «Создать ещё» switch + the primary button. «Срок» = a popover with a words
   field, choices with their dates on the right, «Другая дата…» = the month and the time */
.ov-modal.tnm-top::before{flex:0 0 11vh}
.ov-modal.tnm-top::after{flex:1 1 0}
.tnm-modal .modal-h{min-height:48px;padding-left:16px}
.tnm-modal .modal-ht{padding:12px 0 4px}
.tnm-modal .modal-h > .x{top:12px}
.tnm-modal .modal-h h3{gap:6px;font:500 13px/20px var(--font-sans);color:var(--text-2)}
.tnm-crumb{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 6px;border-radius:var(--radius-s);box-shadow:0 0 0 1px var(--border);font:500 12px/16px var(--font-sans);color:var(--text-strong)}
.tnm-modal .modal-h h3 .tnm-crumb .ic{width:14px;height:14px;color:var(--icon)}
.tnm-modal .modal-h h3 .ic.tnm-sep{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.tnm-h{color:var(--text-strong)}
.tnm-modal .modal-b{padding:4px 16px 12px}
.tnm-modal .modal-f{min-height:52px;padding:0 12px 0 16px;background:transparent;box-shadow:inset 0 1px 0 var(--border-soft)}
.tnm-modal .modal-note{visibility:hidden}   /* Linear shows no key line; «Ctrl + Enter» is the button's tooltip */
.tnm{display:grid;gap:0}
.tnm-title{display:block;width:100%;height:auto;min-height:34px;margin:0;padding:4px 0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;font:600 18px/26px var(--font-sans);color:var(--text-strong)}
.tnm-title::placeholder{color:var(--text-3)}
.tnm-desc{display:block;width:100%;min-height:44px;max-height:220px;margin:2px 0 14px;padding:2px 0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;resize:none;overflow:auto;font:var(--t-body);color:var(--text)}
.tnm-desc::placeholder{color:var(--text-3)}
/* property pills: 26 px, 12/16 500, a soft keyline; an empty one (no deal) in --text-3; open = the pressed fill */
.tnm-props{display:flex;flex-wrap:wrap;gap:6px}
.tnm-p{display:inline-flex;align-items:center;gap:6px;max-width:260px;height:26px;padding:0 9px 0 7px;border-radius:var(--radius-s);background:transparent;box-shadow:inset 0 0 0 1px var(--border);
  font:500 12px/16px var(--font-sans);color:var(--text-2);white-space:nowrap;transition:background-color var(--tsk-d1) linear,color var(--tsk-d1) linear}
.tnm-p > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tnm-p > .ic{flex:none;width:14px;height:14px;stroke-width:2;color:var(--icon)}
.tnm-p > .ic.tsk-wa{color:var(--wa)}
.tnm-p .av{width:16px;height:16px;font-size:8px}
.tnm-p.is-empty{color:var(--text-3)}
.tnm-p.is-past,.tnm-p.is-past > .ic{color:var(--danger)}
.tnm-p:hover{background:var(--surface-hover-raised);color:var(--text-strong)}
.tnm-p[aria-expanded="true"]{background:var(--surface-pressed);color:var(--text-strong)}
.tnm-p:focus-visible{box-shadow:inset 0 0 0 1px var(--border),var(--focus-ring)}
.tnm-st{display:flex;align-items:center;gap:6px;margin:10px 0 0;font:var(--t-caption);color:var(--text-2)}
.tnm-st[hidden]{display:none}
.tnm-st .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--warning)}
/* «Создать ещё»: a small switch before the primary button */
.tnm-more{display:inline-flex;align-items:center;gap:8px;margin-right:8px;font:var(--t-caption);color:var(--text-2);cursor:pointer;user-select:none}
.tnm-more input{position:absolute;opacity:0;width:1px;height:1px}
.tnm-sw{position:relative;width:26px;height:16px;border-radius:999px;background:var(--border-strong);transition:background-color var(--tsk-d2) linear}
.tnm-sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--tsk-d2) var(--tsk-eo)}
.tnm-more input:checked + .tnm-sw{background:var(--accent)}
.tnm-more input:checked + .tnm-sw::after{transform:translateX(10px)}
.tnm-more input:focus-visible + .tnm-sw{box-shadow:var(--focus-ring)}

/* popover: the raised menu surface, fixed in the modal overlay */
.tnm-pop{position:fixed;z-index:60;border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-3);animation:tsk-fade 120ms var(--tsk-eo)}
.tnm-due{width:340px;padding:4px 0 0}
.tnm-dq{display:flex;align-items:center;gap:8px;height:40px;margin:0 4px;padding:0 8px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.tnm-dq .ic{flex:none;width:14px;height:14px;stroke-width:2;color:var(--icon)}
.tnm-dq input{flex:1;min-width:0;height:32px;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font:var(--t-body);color:var(--text-strong)}
.tnm-dq input::placeholder{color:var(--text-3)}
.tnm-db{padding:4px 0}
.tnm-dc{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 12px;text-align:left;font:var(--t-body);color:var(--text-strong)}
.tnm-dc > .ic{flex:none;width:14px;height:14px;stroke-width:2;color:var(--icon)}
.tnm-dc > span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tnm-dc > small{flex:none;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.tnm-dc.act{background:var(--surface-hover-raised)}
.tnm-dbad{margin:4px 12px 6px;font:var(--t-caption);color:var(--text-3)}
.tnm-df{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;box-shadow:inset 0 1px 0 var(--border-soft);font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.tnm-df span:last-child{overflow:hidden;text-overflow:ellipsis}
/* the month: 7 × 36 px cells, today ringed, the picked day accent-filled, a dot where the manager has open tasks */
.tnm-db:has(.tnm-cal-g){padding:8px 12px 10px}
.tnm-cal-h{display:flex;align-items:center;justify-content:space-between;height:32px;margin-bottom:4px}
.tnm-cal-h b{font:var(--t-body-strong);color:var(--text-strong)}
.tnm-cn{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:background-color var(--tsk-d1) linear}
.tnm-cn:hover{background:var(--surface-hover-raised);color:var(--text-strong)}
.tnm-cn:focus-visible{box-shadow:var(--focus-ring)}
.tnm-cn .ic{width:16px;height:16px;stroke-width:2}
.tnm-cal-w,.tnm-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tnm-cal-w span{height:24px;display:grid;place-items:center;font:var(--t-caption-strong);color:var(--text-3)}
.tnm-cd{position:relative;height:36px;display:grid;place-items:center;border-radius:50%;font:var(--t-body);font-variant-numeric:tabular-nums;color:var(--text-strong);transition:background-color var(--tsk-d1) linear}
.tnm-cd:hover{background:var(--surface-hover-raised)}
.tnm-cd.out,.tnm-cd.past{color:var(--text-3)}
.tnm-cd.today{box-shadow:inset 0 0 0 1px var(--border-strong);font-weight:600}
.tnm-cd.on,.tnm-cd.on:hover{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:none}
.tnm-cd i{position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--text-3)}
.tnm-cd.on i{background:var(--on-accent)}
.tnm-cd:focus-visible{outline:var(--focus-outline);outline-offset:1px}
.tnm-cal-t{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;box-shadow:inset 0 1px 0 var(--border-soft);font:var(--t-body);color:var(--text-2)}
.tnm-cal-t .tsk-in{width:80px}
.tnm-cal-t .btn{margin-left:auto}


/* deal search-select (combobox, §5.16); the wrapper takes the shared keyline / focus-within ring */
.tsk-cbx{display:grid;gap:4px;min-width:0;justify-self:stretch}
.tsk-cbx-in{display:flex;align-items:center;gap:8px;height:var(--control-h);padding:0 2px 0 8px}
.tsk-cbx-in > .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.tsk-cbx-in input{padding:0}
.tsk-cbx-x{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:background-color var(--tsk-d1) linear}
.tsk-cbx-x .ic{width:12px;height:12px;stroke-width:2.4}
.tsk-cbx-x:hover{background:var(--surface-hover-raised)}
.tsk-cbx-sub{min-height:20px;font:var(--t-body);color:var(--text-3)}
.tsk-cbx-list{position:fixed;z-index:90;max-height:300px;overflow:auto;padding:4px 0;border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-3);
  opacity:0;transform:translateY(-4px);transition:opacity var(--tsk-d2) var(--tsk-eo),transform var(--tsk-d2) var(--tsk-eo)}
.tsk-cbx-list.is-open{opacity:1;transform:none}
.tsk-cbx-it{position:relative;display:grid;align-content:center;gap:0;width:100%;min-height:44px;padding:6px 12px;text-align:left}
.tsk-cbx-it b{font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tsk-cbx-it b:has(mark){font-weight:400;color:var(--text-3)}
.tsk-cbx-it small{font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tsk-cbx-it.act{background:var(--surface-hover-raised)}
/* the deal linked now: neutral text and a 12 px --accent-text tick at the right (as .mi.on + .on-mark, DESIGN-CALM §3.12
   [S blue check, neutral text]); not a weight change (§1.2) */
.tsk-cbx-it.on{padding-right:36px}
.tsk-cbx-it.on b{color:var(--text-strong)}
.tsk-cbx-on{position:absolute;top:50%;right:12px;margin-top:-6px;display:grid;color:var(--accent-text)}
.tsk-cbx-on .ic{width:12px;height:12px;stroke-width:2.4}
.tsk-cbx-empty{padding:8px 12px;font:var(--t-body);color:var(--text-3)}

/* ── shared micro-motion ── */
@keyframes tsk-shake{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.tsk-shake{animation:tsk-shake 240ms var(--tsk-em)}
@keyframes tsk-roll-up{from{transform:translateY(60%);opacity:0}}
@keyframes tsk-roll-dn{from{transform:translateY(-60%);opacity:0}}
.tsk-n i.up,.tsk-count b.up{animation:tsk-roll-up var(--tsk-d4) var(--tsk-eo)}
.tsk-n i.dn,.tsk-count b.dn{animation:tsk-roll-dn var(--tsk-d4) var(--tsk-eo)}

/* ── responsive: container queries on #view (§4.6) ── */
@container view (max-width:1180px){
  .tsk-dh .tsk-tdy{display:none}
}
/* below 1100 px the rows drop the deal column: the deal goes back into the task's second line */
@container view (max-width:1099px){
  .tsk-r{grid-template-columns:20px minmax(0,1fr) auto 24px;grid-template-areas:"ck main du ow"}
  .tsk-rd{display:none}
  .tsk-ac{grid-area:main}
  .tsk-l2 .tsk-mdl{display:inline-flex}
}
@container view (max-width:960px){
  .tsk-count{display:none}
}

@media (prefers-reduced-motion: reduce){
  .tsk-saved,.tsk-cbx-list,.tsk-blk.is-ghost{transform:none!important}
  .tsk-blk.is-ghost{transition:none}
  .tsk-wk.in-l .tsk-dc,.tsk-wk.in-l .tsk-dh,.tsk-wk.in-r .tsk-dc,.tsk-wk.in-r .tsk-dh,
  .tsk-shake,.tsk-blk.tsk-settle,.tsk-r.is-checked .tsk-ck,.tsk-n i.up,.tsk-n i.dn,.tsk-count b.up,.tsk-count b.dn{animation:none}
}