/* Tasklar sahifasi (agent B). Tokenlar: theme.css / base.css (--v, --tint, --soft, --line, --ink, --gray, --card-bg, --r, --r2, --ri).
   Radius 18, soya yo'q, rang faqat ma'no: qizil = kechikkan, binafsha = bugun, yashil = bajarildi. */

.pg-tasks { max-width:920px; }

/* ---- sarlavha (H.ui.pageHead) va «Birinchi qiling»: telefonda ekrandan chiqmasin ---- */
.pg-tasks .phead, .pg-tasks .phead .first, .pg-tasks .phead .first ol, .pg-tasks .phead .first li { min-width:0; max-width:100%; }
.pg-tasks .phead .first ol { grid-template-columns:minmax(0,1fr); }
.pg-tasks .phead .fitem { min-width:0; }
.pg-tasks .phead .fitem > span:nth-child(2) { min-width:0; overflow-wrap:anywhere; }
.pg-tasks .phead .fitem.b .fn { background:var(--blue-t); color:var(--blue); }

/* ---- segment ---- */
.tk-seg { margin:4px 0 16px; }
.tk-seg button { transition:background .18s, color .18s; }
.tk-seg .cnt { min-width:22px; padding:0 6px; border-radius:999px; font-size:12.5px; }
.tk-seg button[aria-selected="true"] .cnt:not(.r) { color:var(--v); }

/* ---- guruhlar ---- */
.tk-groups { display:flex; flex-direction:column; gap:18px; animation:tkIn .18s cubic-bezier(.16,1,.3,1); }
.tk-gh { display:flex; align-items:center; gap:8px; margin:0 0 8px; font:700 11px/1.2 'Manrope','Onest',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); }
.tk-gh::after { content:''; flex:1; height:1px; background:var(--line); }
.tk-gh .cnt { order:2; font-family:'Onest',system-ui,sans-serif; letter-spacing:0; font-size:12px; padding:1px 8px; border-radius:999px; background:var(--panel); color:var(--gray); }
.tk-gh.v { color:var(--v); } .tk-gh.v .cnt { background:var(--tint); color:var(--v); }
.tk-gh.r { color:var(--red-tx, #a11a30); } .tk-gh.r .cnt { background:var(--red-t); color:var(--red-tx, #a11a30); }
.tk-list { display:flex; flex-direction:column; gap:10px; }

/* ---- task kartasi ---- */
.card.task.tk-card { position:relative; overflow:hidden; padding:14px 16px 12px; border-radius:var(--r, 18px); background:var(--card-bg, #fff); max-height:1400px;
  transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, opacity .3s, max-height .3s; }
.card.task.tk-card:hover { transform:translateY(-2px); border-color:var(--soft); }
.tk-card.od::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red); }
.tk-card.hl { border-color:var(--v); }
.tk-card[data-mode] { border-color:var(--soft); }
.tk-row { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; }
.tk-main { min-width:0; }
.tk-title { margin:5px 0 0; font-size:16px; line-height:1.35; font-weight:600; letter-spacing:-.005em; overflow-wrap:anywhere; }
.tk-body { margin:6px 0 0; color:var(--gray); font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tk-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; color:var(--gray); font-size:13.5px; }
.tk-meta .ic { width:16px; height:16px; }
.tk-client { display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:2px 0; color:var(--v); font-weight:600; font-size:13.5px; text-align:left;
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0 1.5px; transition:background-size .18s; }
.tk-client:hover { background-size:100% 1.5px; }
.tk-client.none { color:var(--gray); font-weight:500; background:none; }
.tk-due { display:inline-flex; align-items:center; gap:5px; }
.tk-due.r { color:var(--red-tx, #a11a30); font-weight:600; }

/* belgi (bajarish) */
.tk-check { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--v); display:inline-flex; align-items:center; justify-content:center; transition:background .18s, transform .18s; }
.tk-check svg.tk-ck { width:30px; height:30px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tk-ck-ring { stroke:var(--soft); stroke-width:1.8; fill:transparent; transition:stroke .18s, fill .25s; }
.tk-ck-path { stroke:var(--v); stroke-width:2.2; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .26s cubic-bezier(.16,1,.3,1), stroke .2s; }
.tk-check:hover .tk-ck-ring, .tk-check[aria-expanded="true"] .tk-ck-ring { stroke:var(--v); fill:var(--tint); }
.tk-check:hover .tk-ck-path, .tk-check[aria-expanded="true"] .tk-ck-path { stroke-dashoffset:12; }
.tk-check:active { transform:scale(.92); }
.tk-check.off { color:var(--gray3); }
.tk-check.off .tk-ck-ring { stroke:var(--line); stroke-dasharray:3 3; }
.tk-card.is-done .tk-ck-ring { stroke:var(--green); fill:var(--green); }
.tk-card.is-done .tk-ck-path { stroke:#fff; stroke-dashoffset:0; transition-duration:.42s; }
.tk-card.is-done .tk-title { color:var(--gray); text-decoration:line-through; text-decoration-color:var(--gray3); }
.tk-card.is-done { border-color:var(--green); }
.tk-card.is-gone { opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin:0; border-width:0; }

/* harakatlar */
.tk-acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.tk-act { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px 6px 11px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:13.5px; font-weight:600;
  transition:background .18s, border-color .18s, color .18s, transform .18s; }
.tk-act .ic { width:17px; height:17px; color:var(--gray); transition:color .18s; }
.tk-act:hover { border-color:var(--soft); color:var(--v); }
.tk-act:hover .ic, .tk-act[aria-expanded="true"] .ic { color:var(--v); }
.tk-act[aria-expanded="true"] { background:var(--tint); border-color:var(--soft); color:var(--v); }
.tk-act:active { transform:scale(.97); }
.tk-act.solid { background:var(--tint); border-color:transparent; color:var(--v); }
.tk-act.solid .ic { color:var(--v); }
.tk-act.solid:hover { border-color:var(--soft); }
@media (min-width:640px) { .tk-act.solid { margin-left:auto; } }
.tk-ro { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); color:var(--gray); font-size:13.5px; }

/* kartaning ichidagi panel (bajarish / muddat / izoh) */
.tk-panel { margin-top:12px; padding:14px; border-radius:var(--r2, 14px); background:var(--surf); border:1px solid var(--line); animation:tkIn .18s cubic-bezier(.16,1,.3,1); }
.tk-panel[hidden] { display:none; }
.tk-form { display:flex; flex-direction:column; gap:10px; }
.tk-form label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tk-form .hint { margin:0; }
.tk-q { margin:0; font-weight:600; font-size:15px; }
.tk-in { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--ri, 12px); background:var(--card-bg, #fff); color:var(--ink); font-size:15px; transition:border-color .18s; }
.tk-in:hover { border-color:var(--soft); }
.tk-in:focus { outline:none; border-color:var(--v); }
textarea.tk-in { min-height:92px; resize:vertical; line-height:1.45; }
select.tk-in { appearance:auto; }
.tk-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tk-quick { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tk-quick .caps { margin-right:4px; }
.tk-line { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tk-cnt { flex:none; color:var(--gray); font-size:12.5px; }
.tk-err:empty { display:none; }
.tk-err .msg { margin:0; }
.tk-btns { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:2px; }

/* yangi task */
.tk-newbox { margin:0 0 16px; padding:16px; border:1px solid var(--soft); border-radius:var(--r, 18px); background:var(--card-bg, #fff); animation:tkIn .18s cubic-bezier(.16,1,.3,1); }
.tk-newbox > .caps { margin:0 0 12px; color:var(--v); }

/* skelet */
.tk-skel { display:flex; flex-direction:column; gap:10px; }
.tk-skel .skel { height:112px; border-radius:var(--r, 18px); }

/* bo'sh holat */
.pg-tasks .empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:34px 18px 28px; border:1px dashed var(--line); border-radius:var(--r, 18px); animation:tkIn .18s cubic-bezier(.16,1,.3,1); }
.pg-tasks .es-art { position:relative; width:112px; height:84px; margin-bottom:4px; }
.pg-tasks .es-art span { position:absolute; border-radius:50%; }
.pg-tasks .es-c1 { width:64px; height:64px; left:24px; top:10px; background:var(--tint); }
.pg-tasks .es-art .es-c2 { width:26px; height:26px; left:4px; top:46px; background:var(--blue-t); border-radius:9px; transform:rotate(12deg); }
.pg-tasks .es-c3 { width:18px; height:18px; right:8px; top:6px; background:var(--green-t); }
.pg-tasks .es-art svg.tk-ck { position:absolute; left:38px; top:24px; width:36px; height:36px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pg-tasks .es-art .tk-ck-ring { stroke:var(--soft); fill:var(--card-bg, #fff); }
.pg-tasks .es-art .tk-ck-path { stroke-dashoffset:0; stroke:var(--v); }
.pg-tasks .es-title { margin:0; font-size:17px; font-weight:600; }
.pg-tasks .es-do { margin:0; display:flex; flex-direction:column; gap:4px; max-width:440px; padding:10px 14px; border-radius:var(--r2, 14px); background:var(--surf); color:var(--ink); font-size:14.5px; }
.pg-tasks .es-do .caps { color:var(--v); }
.pg-tasks .es-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }

@keyframes tkIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- animatsiya darajasi ---- */
html[data-motion="lite"] .pg-tasks :is(.tk-groups, .tk-panel, .tk-newbox, .empty-state) { animation-name:tkFade; }
@keyframes tkFade { from { opacity:0; } to { opacity:1; } }
html[data-motion="off"] .pg-tasks.pg-tasks.pg-tasks *, html[data-motion="off"] .pg-tasks.pg-tasks.pg-tasks *::before, html[data-motion="off"] .pg-tasks.pg-tasks.pg-tasks *::after { animation:none; transition:none; }
html[data-motion="off"] .pg-tasks .card.task.tk-card:hover { transform:none; }
@media (prefers-reduced-motion: reduce) {
  .pg-tasks.pg-tasks.pg-tasks.pg-tasks *, .pg-tasks.pg-tasks.pg-tasks.pg-tasks *::before, .pg-tasks.pg-tasks.pg-tasks.pg-tasks *::after { animation:none; transition:none; }
  .pg-tasks .card.task.tk-card:hover { transform:none; }
}
@media (max-width:420px) {
  .tk-two { grid-template-columns:1fr; }
  .tk-act span { font-size:13px; }
}

/* ---- brauzer standart tugma uslubini bekor qilish ---- */
.tk-card :is(.tk-check, .tk-act, .tk-client) { -webkit-appearance:none; appearance:none; font:inherit; margin:0; cursor:pointer; }
.tk-card .tk-check { border:0; background:transparent; }
.tk-card .tk-act { border:1px solid var(--line); background:transparent; color:var(--ink); }
.tk-card .tk-act[aria-expanded="true"], .tk-card .tk-act.solid { background:var(--tint); color:var(--v); }
.tk-card .tk-act.solid { border-color:transparent; }
.tk-card .tk-client { border:0; background-color:transparent; color:var(--v); text-align:left; }
.tk-card .tk-client.deal { padding:2px 10px 2px 8px; border-radius:999px; background-color:var(--tint); background-image:none; }
.tk-card .tk-client.deal:hover { background-color:var(--soft); }
.tk-card .tk-act:hover { border-color:var(--soft); color:var(--v); }

/* telefonda asosiy harakat «Bajarildi» birinchi turadi */
@media (max-width:639px) { .tk-card .tk-act.solid { order:-1; } }