/* Центр задач (29.09.2026). Решения — DEVELOPMENT.md §«Центр задач». Раздел — отдельная страница
   на весь экран (роутер pages.js вешает .as-page), без окна и полей вокруг: окно с полями над фоном
   читалось как всплывашка поверх сводки (владелец, вечер 29.09). Белый фон с зелёными частицами
   виден в шапке и в пустом месте под списком; карточки артикулов — сплошные, шаги «что делать»
   внутри карточки (боковой панели нет). */
#modal-tasks{--tc-g:#3f8f0a;--tc-g-soft:#e6f4d6;--tc-line:#d6e5bf}
#modal-tasks.as-page{background:#fff}
#tc-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.tc-shell{position:relative;z-index:1;display:flex;flex-direction:column;width:min(1240px,100%);height:calc(100vh - 52px);overflow:hidden}
.modal.as-page>.tc-shell{width:100vw;height:100vh;margin:0;padding:0;border:0;border-radius:0;background:transparent}

.tc-pin{flex:none;position:relative;z-index:5;padding:10px 24px;background:rgba(255,255,255,.8);border-bottom:1px solid var(--tc-line)}
.tc-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;justify-content:flex-start}
.modal.as-page .tc-pin>.tc-head{position:static;background:none;border:0;padding:0;margin:0 0 10px}
.tc-head h2{margin:0;font-size:18px;letter-spacing:-.01em}
.tc-kpis{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.tc-kpi{padding:4px 12px;border-radius:999px;font-weight:600;font-size:12px;border:1px solid var(--line);background:#fff}
.tc-kpi b{font-size:14px;margin-right:4px}
.tc-kpi.bad{background:var(--bad-soft);border-color:#f3c9c6;color:var(--bad)}
.tc-kpi.mid{background:var(--warn-soft);border-color:#f0dcb6;color:var(--warn)}

.tc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tc-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:5px 6px 5px 12px;cursor:pointer;transition:.15s;user-select:none}
.tc-chip:hover{border-color:#9fbf6d;transform:translateY(-1px)}
.tc-chip.on{background:var(--tc-g);border-color:var(--tc-g);color:#fff}
.tc-chip.zero{opacity:.45}
.tc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.tc-n{font-weight:700;font-size:14px;min-width:18px;text-align:center}
.tc-q{width:20px;height:20px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--muted);font-size:11px;font-weight:700;cursor:help;display:inline-grid;place-items:center;flex:none;padding:0}
.tc-q:hover{background:#2563eb;border-color:#2563eb;color:#fff}
.tc-chip.on .tc-q{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);color:#fff}

.tc-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tc-seg{display:inline-flex;background:#eef1ea;border-radius:9px;padding:2px}
.tc-seg button{border:0;background:none;padding:5px 11px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:600;font-size:12px}
.tc-seg button.on{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.tc-sel,.tc-search{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 10px;height:32px;font:inherit}
.tc-search{width:200px}
/* направление и хантер: кнопка → окно с поиском и галочками (выбор нескольких) */
.tc-ms{display:inline-flex;align-items:center;gap:8px;max-width:220px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 10px;height:32px;font:inherit;cursor:pointer;color:var(--text)}
.tc-ms span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-ms i{font-style:normal;color:var(--muted);font-size:11px}
.tc-ms.on{border-color:var(--tc-g);background:var(--tc-g-soft);color:#2d6a06;font-weight:600}
.tc-ms.open{box-shadow:0 0 0 3px rgba(63,143,10,.18)}
#tc-ms{position:fixed;z-index:100;width:300px;max-width:calc(100vw - 20px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,10,.2);padding:10px;display:none}
#tc-ms input[type=search]{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit}
.tc-ms-act{display:flex;gap:12px;margin:8px 2px 6px}
.tc-ms-act button{border:0;background:none;color:#2563eb;font-weight:600;cursor:pointer;padding:0;font-size:12px}
.tc-ms-lst{max-height:min(360px,55vh);overflow:auto}
.tc-ms-lst label{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer}
.tc-ms-lst label:hover{background:#f3f8ec}
.tc-ms-lst label span{flex:1;min-width:0}
.tc-ms-lst label b{color:var(--muted);font-weight:600;font-size:12px}
.tc-ms-lst label.zero{opacity:.5}
.tc-ms-none{padding:10px 4px;color:var(--muted)}
.tc-reset{border:0;background:none;color:#2563eb;cursor:pointer;font-weight:600;padding:6px}
.tc-reset[disabled]{color:var(--muted);opacity:.5;cursor:default}
.tc-count{margin-left:auto;color:var(--muted)}

/* лента: прокручивается сама, шапка стоит; заголовок направления липнет под шапкой */
.tc-body{flex:1;min-height:0;overflow:auto;position:relative;z-index:2}
.tc-sec{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 24px;background:#f0f8e6;border-bottom:1px solid var(--tc-line)}
.tc-sec b{font-size:14px}
.tc-sec small{font-weight:500;color:var(--muted)}
.tc-red{color:var(--bad);font-weight:600}

/* карточка артикула: товар сверху, под ним его проблемы — каждая со своими шагами */
.tc-art{display:flex;gap:14px;align-items:flex-start;padding:10px 24px;border-bottom:1px solid var(--tc-line);background:#fff}
.tc-main{flex:1;min-width:0}
.tc-ah{display:flex;align-items:center;gap:8px;min-width:0}
.tc-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tc-meta{color:var(--muted);font-size:12px;margin-bottom:4px}
.tc-issue{border-left:3px solid #e0a23a;padding:4px 0 4px 10px;margin-top:4px}
.tc-issue.bad{border-left-color:var(--bad)}
.tc-ih{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-type{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;white-space:nowrap}
.tc-why{flex:1;min-width:180px}
.tc-go{white-space:nowrap;padding:2px 10px;font-size:12px;margin-left:auto}
/* шаги столбиком, по пункту в строке: номер в кружке + текст (владелец 29.09: «пунктами вниз») */
.tc-steps{display:flex;flex-direction:column;gap:3px;margin:5px 0 2px;padding:0;list-style:none;counter-reset:s;font-size:12.5px;color:#445}
.tc-steps li{counter-increment:s;display:flex;gap:8px;align-items:baseline;line-height:1.4}
.tc-steps li::before{content:counter(s);flex:none;width:17px;height:17px;border-radius:50%;background:var(--tc-g-soft);color:var(--tc-g);font-size:10px;font-weight:700;display:inline-grid;place-items:center;transform:translateY(-1px)}
/* задача-следствие: вместо шагов — отсылка к задаче-причине того же артикула */
.tc-after{margin:4px 0 2px;font-size:12.5px;color:var(--muted);font-style:italic}
.tc-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.tc-pill.bad{background:var(--bad-soft);color:var(--bad)}.tc-pill.mid{background:var(--warn-soft);color:var(--warn)}
.tc-pill.ozon{background:#e8effd;color:#2563eb}.tc-pill.wb{background:#f3e8fb;color:#7a2fb0}
.tc-ph{width:38px;height:46px;border-radius:8px;flex:none;object-fit:cover;display:grid;place-items:center}
.tc-ph-t{color:#fff;font-weight:700;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tc-empty{padding:60px 20px;text-align:center;color:var(--muted);background:rgba(255,255,255,.85)}

#tc-pop{position:fixed;z-index:100;width:340px;max-width:calc(100vw - 20px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(20,40,10,.22);padding:14px 16px;display:none}
#tc-pop h5{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:8px}
#tc-pop .tc-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:10px 0 3px}
#tc-pop ol{margin:0;padding-left:18px}
#tc-pop .tc-go2{margin-top:10px;font-size:12px;color:#2563eb;font-weight:600}
/* «Продвижение»: расчёт по товару и примеры — окно длиннее, листается внутри (01.10.2026) */
#tc-pop{width:400px;max-height:min(80vh,640px);overflow-y:auto;overscroll-behavior:contain}
#tc-pop .tc-calc{font-size:12px;line-height:1.45;background:#f6f8f4;border-radius:8px;padding:6px 9px;margin-top:4px;font-variant-numeric:tabular-nums}
#tc-pop .tc-ex{border-top:1px solid var(--line);padding:8px 0 4px;font-size:13px}
#tc-pop .tc-ex:first-of-type{border-top:0}
#tc-pop .tc-ex-g{font-size:12px;color:var(--muted);margin:2px 0}

@media (max-width:900px){
  .tc-pin{padding:8px 12px}.tc-sec,.tc-art{padding-left:12px;padding-right:12px}
  .tc-search{width:100%}.tc-kpis{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.tc-chip{transition:none}}