/* CEOroom — окно задачи 9a «как Todoist» (app/task-card.js). Эталон — ~/pf-private/ceo-home/redesign-apple/all/06-zadacha-todoist/mockup.html
   (task-dark.png, task-phone-dark.png). Токены — таблица docs/design-rules.md раздел 7 (свои --tk-*, чтобы не зависеть от других экранов).
   Тема — <html data-theme>. Плотность как в Todoist (решение владельца 01.11): текст 15/20, заголовок 20/25, строки 40 px; телефон — 17. */
:root,:root[data-theme="dark"]{
  --tk-bg:#181B1E; --tk-side:#1D2024; --tk-row:#22262A; --tk-line:rgba(255,255,255,.10); --tk-line-strong:rgba(255,255,255,.28);
  --tk-text:#EDEFF1; --tk-text2:#B4BBC2; --tk-accent:#C6D63F; --tk-fill:#C6D63F; --tk-onfill:#0E1012;
  --tk-attn:#F0A93B; --tk-onattn:#0E1012; --tk-ok:#45C27A;
  --tk-own:#E3B341; --tk-man:#A391F5; --tk-spe:#8AA6D8; --tk-fde:#E3825A;
  --tk-shadow:0 24px 64px rgba(0,0,0,.55); --tk-scrim:rgba(6,7,8,.62);
}
:root[data-theme="warm"]{
  --tk-bg:#F1ECE4; --tk-side:#E9E3D9; --tk-row:#DDD6CB; --tk-line:rgba(52,42,32,.16); --tk-line-strong:rgba(52,42,32,.40);
  --tk-text:#231E19; --tk-text2:#51473D; --tk-accent:#4D5800; --tk-fill:#4D5800; --tk-onfill:#FFFFFF;
  --tk-attn:#7A4100; --tk-onattn:#FFFFFF; --tk-ok:#175A2F;
  --tk-own:#8A6208; --tk-man:#5E4BBF; --tk-spe:#4E627E; --tk-fde:#A84B22;
  --tk-shadow:0 24px 64px rgba(60,40,20,.25); --tk-scrim:rgba(60,48,36,.45);
}
:root[data-theme="light"]{
  --tk-bg:#FFFFFF; --tk-side:#F6F7F8; --tk-row:#EBEEF0; --tk-line:rgba(17,20,23,.12); --tk-line-strong:rgba(17,20,23,.36);
  --tk-text:#111417; --tk-text2:#4A545C; --tk-accent:#566300; --tk-fill:#566300; --tk-onfill:#FFFFFF;
  --tk-attn:#995000; --tk-onattn:#FFFFFF; --tk-ok:#18794E;
  --tk-own:#A87A0E; --tk-man:#6A55D6; --tk-spe:#566C8C; --tk-fde:#C0582C;
  --tk-shadow:0 24px 64px rgba(17,20,23,.22); --tk-scrim:rgba(17,20,23,.40);
}
.tk-scrim{position:fixed;inset:0;z-index:30;background:var(--tk-scrim)}
.tk9{--tk-font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  position:fixed;z-index:31;left:50%;top:12px;transform:translateX(-50%);width:min(1000px,calc(100vw - 48px));height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:876px;
  background:var(--tk-bg);color:var(--tk-text);border-radius:20px;box-shadow:var(--tk-shadow);overflow:hidden;
  font-family:var(--tk-font);font-size:15px;line-height:20px;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:52px auto minmax(0,1fr) auto;
  grid-template-areas:"bar bar" "ttl side" "main side" "say side"}
.tk9 *{box-sizing:border-box}
.tk9 h1,.tk9 p{margin:0;padding:0}
.tk9 :where(button,a,summary){font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left;letter-spacing:inherit;text-decoration:none}
.tk9 :where(textarea,input){font:inherit;color:inherit}
.tk9 button:disabled{opacity:.35;cursor:default}
.tk9 :focus-visible{outline:3px solid var(--tk-accent);outline-offset:2px}
.tk9 svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.tk9 .ph{display:none !important}
.tk-sp{flex:1}
.tk-n,.tk-tm,.tk-as{font-variant-numeric:tabular-nums}

/* ── верхняя полоса ── */
.tk-bar{grid-area:bar;display:flex;align-items:center;gap:8px;padding:0 12px 0 24px;border-bottom:1px solid var(--tk-line);min-width:0}
.tk-crumb{display:inline-flex;align-items:center;gap:8px;height:32px;color:var(--tk-text2);font-weight:500;white-space:nowrap;min-width:0}
.tk-crumb b{color:var(--tk-text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tk-crumb svg.tk-sep{width:16px;height:16px}
.tk-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:var(--tk-row);color:var(--tk-text2);font-weight:500;white-space:nowrap}
.tk-pill svg.i{width:16px;height:16px}
.tk-ib{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--tk-text2);flex:none}
.tk-ib:hover:not(:disabled){background:var(--tk-row);color:var(--tk-text)}
.tk-more{position:relative}
.tk-more summary{list-style:none}
.tk-more summary::-webkit-details-marker{display:none}
.tk-menu{position:absolute;right:0;top:40px;z-index:3;min-width:240px;background:var(--tk-side);border:1px solid var(--tk-line);border-radius:12px;box-shadow:var(--tk-shadow);padding:6px;display:flex;flex-direction:column}
.tk-mi{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:8px;font-weight:500;white-space:nowrap}
.tk-mi:hover{background:var(--tk-row)}
.tk-mi svg.i{color:var(--tk-text2)}

/* ── заголовок ── */
.tk-ttl{grid-area:ttl;display:flex;gap:12px;align-items:flex-start;padding:16px 24px 4px}
.tk-ttl h1{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-ttl.done h1{color:var(--tk-text2);text-decoration:line-through}
.tk-ck{width:44px;height:44px;margin:-10px -10px -10px -11px;display:grid;place-items:center;flex:none;border-radius:50%}
.tk-ck > span{width:22px;height:22px;border-radius:50%;border:2px solid var(--pc);display:grid;place-items:center}
.tk-ck.on > span{background:var(--pc);color:var(--tk-bg)}
.tk-ck.on svg.i{width:14px;height:14px;stroke-width:3}
.tk-ck:not(.ro):hover > span{background:color-mix(in srgb,var(--pc) 18%,transparent)}
.p1{--pc:var(--tk-attn)}.p2{--pc:var(--tk-accent)}.p3{--pc:var(--tk-text2)}.p4{--pc:var(--tk-line-strong)}

/* ── основная колонка ── */
.tk-main{grid-area:main;overflow-y:auto;padding:4px 24px 12px 57px;scrollbar-width:thin;min-height:0}
.tk-blk{padding:10px 0;border-top:1px solid var(--tk-line)}
.tk-blk:first-child{border-top:0;padding-top:4px}
.tk-bh{display:flex;align-items:center;gap:8px;height:28px;font-weight:600}
.tk-bh svg.i{color:var(--tk-text2)}
.tk-n{color:var(--tk-text2);font-weight:500}
.tk-about{display:grid;gap:8px}
.tk-ab{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 10px}
.tk-ab svg.i{margin-top:1px;color:var(--tk-accent)}
.tk-ab-need svg.i{color:var(--tk-own)}
.tk-ab.nl{grid-template-columns:minmax(0,1fr)}
.tk-lb{font-weight:600;color:var(--tk-text2);display:flex;gap:8px}
.tk-tx{grid-column:2;overflow-wrap:anywhere}
.tk-ab.nl .tk-tx{grid-column:1}
.tk-tx p + p{margin-top:6px}
.tk-tx a{color:var(--tk-accent);text-decoration:underline;text-underline-offset:2px}
.tk-none{color:var(--tk-text2)}
.tk-rows{margin-top:4px;display:flex;flex-direction:column}
.tk-row{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--tk-line);min-width:0;width:100%}
.tk-row:last-child{border-bottom:0}
.tk-row > svg.i{color:var(--tk-text2)}
.tk-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-m{color:var(--tk-text2);white-space:nowrap}
.tk-file:not(.off) .tk-m{color:var(--tk-accent);font-weight:600}
.tk-file:not(.off):hover{background:color-mix(in srgb,var(--tk-row) 50%,transparent)}
.tk-row.done .tk-t{color:var(--tk-text2);text-decoration:line-through}
.tk-sck > span{width:18px;height:18px;border-radius:50%;border:2px solid var(--tk-line-strong);display:grid;place-items:center}
.tk-sck{width:20px;display:grid;place-items:center;flex:none}
.tk-sck.on > span{background:var(--tk-text2);border-color:var(--tk-text2);color:var(--tk-bg)}
.tk-sck svg.i{width:12px;height:12px;stroke-width:3}
.tk-msgs{display:grid;gap:10px;margin-top:6px}
.tk-msg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.tk-mh{display:flex;gap:8px;align-items:baseline}
.tk-nm{font-weight:600}
.tk-tm{color:var(--tk-text2)}
.tk-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--tk-row);color:var(--tk-text2);position:relative}
.tk-av svg.i{width:16px;height:16px}
.tk-av.own{color:var(--tk-own)}
.tk-av.bot{color:var(--tk-accent)}
.tk-bdg{position:absolute;top:-4px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--tk-attn);color:var(--tk-onattn);
  font-size:13px;line-height:20px;font-weight:700;text-align:center;border:2px solid var(--tk-side);box-sizing:content-box}
.tk-hist{display:grid;gap:4px;margin-top:4px}
.tk-hist > div{display:flex;gap:10px}

/* ── поле «Сказать Светлане» ── */
.tk-say{grid-area:say;padding:10px 24px 14px;border-top:1px solid var(--tk-line);margin:0}
.tk-say-ro{display:flex;align-items:center;gap:12px}
.tk-say-ro .tk-none{flex:1}
.tk-say-ro .tk-btn{width:auto}
.tk-field{display:flex;align-items:flex-end;gap:8px;min-height:48px;border-radius:12px;background:var(--tk-row);padding:6px 6px 6px 6px}
.tk-field textarea{flex:1;min-width:0;min-height:36px;max-height:40vh;resize:none;border:0;background:none;outline:none;font-size:15px;line-height:20px;padding:8px 0}
.tk-field textarea::placeholder{color:var(--tk-text2)}
.tk-field .tk-ib{border-radius:50%}
.tk-field .tk-sv{color:var(--tk-man)}
.tk-field .tk-ib.fill{background:var(--tk-fill);color:var(--tk-onfill)}
.tk-field .tk-ib.fill:hover{background:var(--tk-fill);color:var(--tk-onfill);filter:brightness(1.06)}
.tk-field .tk-ib.fill svg.i{stroke-width:2.2}
.tk-field .dict-btn{display:none}

/* ── свойства справа ── */
.tk-side{grid-area:side;background:var(--tk-side);border-left:1px solid var(--tk-line);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.tk-btn{height:44px;border-radius:22px;display:flex;align-items:center;gap:8px;padding:0 16px;font-weight:600;white-space:nowrap;width:100%;flex:none}
.tk-btn.fill{background:var(--tk-fill);color:var(--tk-onfill)}
.tk-btn.fill svg.i{stroke-width:2.2}
.tk-btn.sec{background:var(--tk-row)}
.tk-btn.sec svg.i{color:var(--tk-text2)}
.tk-as{margin-left:auto;font-weight:500}
.tk-props{display:flex;flex-direction:column}
.tk-pr{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;min-height:40px;border-bottom:1px solid var(--tk-line);gap:8px}
.tk-pr:last-child{border-bottom:0}
.tk-k{color:var(--tk-text2)}
.tk-v{display:flex;align-items:center;gap:6px;font-weight:500;min-width:0;flex-wrap:wrap;padding:6px 0}
.tk-v > svg.i,.tk-date svg.i{width:16px;height:16px;color:var(--tk-text2)}
.tk-pc{width:14px;height:14px;border-radius:50%;border:2px solid var(--pc);flex:none;display:block}
.tk-prios{display:flex;gap:2px;margin-left:-8px}
.tk-pc-b{width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
.tk-pc-b.on{background:var(--tk-row)}
.tk-pc-b:hover{background:var(--tk-row)}
.tk-date{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.tk-date input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.tk-rb{display:inline-flex;align-items:center;gap:6px;min-height:32px;border-radius:8px}
.tk-ri{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--rc) 20%,transparent);color:var(--rc)}
.tk-ri svg.i{width:14px;height:14px;stroke-width:2}
.tk-ri.sug{background:none;border:1.5px dashed var(--rc)}
.tk-ri.own{--rc:var(--tk-own)}.tk-ri.man{--rc:var(--tk-man)}.tk-ri.spe{--rc:var(--tk-spe)}.tk-ri.fde{--rc:var(--tk-fde)}
.tk-lab{display:inline-flex;align-items:center;height:26px;padding:0 8px;border-radius:13px;background:var(--tk-row);font-weight:500}
.tk-who{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-right:6px}
button.tk-who{border-radius:16px;padding-right:8px}
button.tk-who:hover{background:var(--tk-row)}
.tk-agent{margin-top:auto}

/* ── телефон: лист на весь экран, свойства под заголовком, поле внизу ── */
@media (max-width:760px){
  .tk9 .ph{display:grid !important}
  .tk9 .dt{display:none !important}
  .tk-scrim{display:none}
  .tk9{inset:0;left:0;top:0;transform:none;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow-y:auto;
    display:flex;flex-direction:column;font-size:17px;line-height:22px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .tk-bar{position:sticky;top:0;z-index:2;background:var(--tk-bg);height:52px;padding:0 8px 0 4px;padding-top:env(safe-area-inset-top,0px);height:calc(52px + env(safe-area-inset-top,0px))}
  .tk-ib{width:44px;height:44px}
  .tk-crumb b{font-size:17px}
  .tk-ttl{padding:16px 16px 4px}
  .tk-ttl h1{font-size:20px;line-height:25px}
  .tk-side{order:1;flex:none;background:none;border:0;padding:8px 16px;overflow:visible}
  .tk-main{order:2;flex:none}
  .tk-bar,.tk-ttl{flex:none}
  .tk-btn{height:50px;border-radius:25px}
  .tk-pr{min-height:44px;grid-template-columns:112px minmax(0,1fr)}
  .tk-main{padding:0 16px 16px;overflow:visible}
  .tk-row{min-height:44px}
  .tk-say{position:fixed;left:0;right:0;bottom:0;z-index:2;background:var(--tk-bg);padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .tk-field{min-height:52px}
  .tk-field textarea{font-size:17px;line-height:22px;padding:11px 0}
  .tk-field .tk-ib{width:44px;height:44px}
  .tk-say-ro{flex-direction:column;align-items:stretch}
  .tk-menu{position:fixed;left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .tk-mi{height:48px}
  .tk-rb,.tk-who,.tk-date{min-height:44px}
  .tk-pc-b{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.tk9 *{transition:none !important}}