/* WolfAssistant 3.3 — tasks.css (module B): the task hub, board, timeline, reminders, task sheet, import, home card.
   Tokens from app.css; logical properties throughout so Arabic flips the layout. */
.tk-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tk-typeit{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;padding:4px 8px 4px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.tk-typeit svg.i{color:var(--blue)}
.tk-typeit input{flex:1;min-width:0;border:0;background:none;padding:9px 4px;font:inherit;color:var(--ink);outline:none}
.tk-typeit input::placeholder{color:var(--muted)}
.tk-actions{display:flex;gap:6px;flex-wrap:wrap}
.tk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tk-seg{overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;max-width:100%}
.tk-seg button{min-height:40px}
.tk-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.tk-filters .mini.on{background:var(--frost);color:var(--blue);border-color:rgba(10,92,255,.35)}
.tk-filters .mini .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}
.tk-search{display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);min-height:36px}
.tk-search input{border:0;background:none;padding:6px 2px;font:inherit;color:var(--ink);outline:none;width:150px;max-width:40vw}
.tk-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tk-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;min-height:44px}
.tk-stat b{font:700 1.15rem var(--disp);color:var(--ink)}.tk-stat span{font-size:.72rem;color:var(--muted);white-space:nowrap}
.tk-stat.bad b{color:var(--bad)}.tk-stat.warn b{color:var(--warn)}.tk-stat.ok b{color:var(--ok)}.tk-stat.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(10,92,255,.15)}
/* sections of My work */
.tk-sec{margin-bottom:16px}
.tk-sec h3{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.95rem}
.tk-sec h3 .n{font:600 .74rem var(--font);padding:1px 8px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.tk-sec.hot h3{color:var(--bad)}.tk-sec.hot h3 .n{background:var(--badbg);color:var(--bad)}
.tk-sec.dim{opacity:.72}
/* a task row */
.tk-wrap{position:relative;border-radius:14px;overflow:hidden;margin-bottom:8px}
.tk-wrap .tk-reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-inline:18px;gap:6px;background:var(--ok);color:#fff;font-weight:600;opacity:0;transition:opacity .15s}
.tk-wrap.swiping .tk-reveal{opacity:1}.tk-wrap.far .tk-reveal{background:var(--ok)}
.tk-wrap.gone{height:0;margin:0;transition:height .2s,margin .2s}
.tk-row{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer;min-height:56px;transition:border .12s,transform .12s;touch-action:pan-y;border-inline-start:4px solid var(--pc,var(--line))}
.tk-row:hover{border-color:rgba(10,92,255,.4);border-inline-start-color:var(--pc,var(--line))}
.tk-row.is-done .tt{text-decoration:line-through;opacity:.6}
.tk-row .grow{flex:1;min-width:0}
.tk-row .tt{font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk-row .ss{font-size:.8rem;color:var(--muted);line-height:1.35;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:2px}
.tk-tick{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;flex:none;background:var(--paper);transition:all .15s}
.tk-tick:hover,.tk-tick:focus-visible{border-color:var(--ok);color:var(--ok)}
.tk-tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.tk-tick.half{border-color:var(--warn);color:var(--warn)}
.tk-tick svg.i{width:18px;height:18px}
.tk-due{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink2)}
.tk-due.late{color:var(--bad)}.tk-due.soon{color:var(--warn)}.tk-due.ok{color:var(--ok)}
.tk-due svg.i{width:14px;height:14px}
.tk-pri{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--surface2);color:var(--ink2)}
.tk-pri i{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--muted));display:inline-block}
.tk-pri.urgent{background:var(--badbg);color:var(--bad)}.tk-pri.high{background:var(--warnbg);color:#7A4F00}.tk-pri.low{color:var(--muted)}
:root[data-theme="dark"] .tk-pri.high{color:#F2C879}
.tk-pbar{height:4px;border-radius:4px;background:var(--line2);overflow:hidden;width:100%;max-width:220px;margin-top:4px}.tk-pbar i{display:block;height:100%;background:var(--grad);border-radius:4px}
.tk-st{font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--frost);color:var(--blue)}
.tk-st.waiting{background:var(--warnbg);color:#7A4F00}.tk-st.doing{background:var(--frost);color:var(--blue)}.tk-st.done{background:var(--okbg);color:var(--ok)}.tk-st.cancelled{background:var(--surface2);color:var(--muted)}
:root[data-theme="dark"] .tk-st.waiting{color:#F2C879}
.tk-who{display:inline-flex;align-items:center;gap:4px}
.tk-src{font-size:.7rem;color:var(--muted);padding:0 6px;border:1px dashed var(--line);border-radius:999px}
/* board */
.tk-board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:10px;overflow:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.tk-col{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:8px;min-height:160px;display:flex;flex-direction:column;gap:8px;transition:background .15s,border .15s}
.tk-col.over{border-color:var(--blue);background:var(--frost)}
.tk-col .hd{display:flex;align-items:center;gap:8px;padding:4px 6px;font-weight:600}
.tk-col .hd .dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--muted))}.tk-col .hd .n{margin-inline-start:auto;font-size:.74rem;color:var(--muted)}
.tk-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:grab;border-inline-start:4px solid var(--pc,var(--line));user-select:none;-webkit-user-select:none}
.tk-card.drag{opacity:.5}.tk-card:active{cursor:grabbing}
.tk-card .tt{font-weight:600;font-size:.92rem;line-height:1.3}.tk-card .ss{font-size:.76rem;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.tk-card .mv{display:flex;gap:4px;margin-top:8px}.tk-card .mv button{flex:1;min-height:34px}
@media(min-width:901px){.tk-card .mv{display:none}}
@media(max-width:900px){.tk-board{display:flex;scroll-snap-type:x mandatory;gap:10px}.tk-col{flex:0 0 84vw;scroll-snap-align:start}}
/* timeline */
.tk-tl-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tk-tl-day{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line2)}
.tk-tl-day.today .d b{color:var(--blue)}.tk-tl-day.past .d{opacity:.7}
.tk-tl-day .d{font-size:.8rem;color:var(--muted);line-height:1.25;padding-top:6px}.tk-tl-day .d b{display:block;font:700 1.05rem var(--disp);color:var(--ink)}
.tk-tl-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;margin-bottom:6px;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--pc,var(--line));cursor:pointer;min-height:40px}
.tk-tl-bar.late{background:var(--badbg)}.tk-tl-bar .tt{font-weight:600;font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-tl-bar.is-done .tt{text-decoration:line-through;opacity:.6}
.tk-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-bottom:10px}.tk-legend span{display:inline-flex;align-items:center;gap:5px}.tk-legend i{width:10px;height:10px;border-radius:50%;background:var(--c)}
@media(max-width:600px){.tk-tl-day{grid-template-columns:64px 1fr}}
/* reminders */
.tk-rem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:8px;min-height:56px}
.tk-rem .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--warnbg);color:var(--warn);flex:none}
.tk-rem.past .ic{background:var(--badbg);color:var(--bad)}.tk-rem.done{opacity:.6}.tk-rem.done .ic{background:var(--okbg);color:var(--ok)}
.tk-rem .grow{flex:1;min-width:0}.tk-rem .tt{font-weight:600;line-height:1.3}.tk-rem .ss{font-size:.8rem;color:var(--muted)}
.tk-rem .acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* the task sheet */
.tk-sheet h2{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tk-sheet .f.big{font-size:1.05rem;font-weight:600}
.tk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.tk-grid2{grid-template-columns:1fr}}
.tk-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tk-seg4 button{flex:1;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tk-seg4 button i{width:9px;height:9px;border-radius:50%;background:var(--pc)}
.tk-people{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tk-sug{position:relative}.tk-sug .list{position:absolute;inset-inline:0;top:100%;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);overflow:hidden;max-height:220px;overflow-y:auto}
.tk-sug .list button{display:block;width:100%;text-align:start;padding:10px 12px;min-height:44px}.tk-sug .list button:hover,.tk-sug .list button.on{background:var(--surface2)}.tk-sug .list:empty{display:none}
.tk-check{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.tk-check .it{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--surface2);border:1px solid var(--line2);min-height:44px}
.tk-check .it input[type=checkbox]{width:20px;height:20px;accent-color:var(--ok);flex:none}
.tk-check .it .tx{flex:1;min-width:0;background:none;border:0;font:inherit;color:var(--ink);outline:none;padding:6px 2px}
.tk-check .it.done .tx{text-decoration:line-through;color:var(--muted)}
.tk-check .it .iconbtn{width:34px;height:34px;border-radius:9px}
.tk-check .add{display:flex;gap:6px}
.tk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tk-chips .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 10px;font-weight:500;font-size:.8rem}
.tk-chips .tag button{margin-inline-start:4px;line-height:1;color:inherit;opacity:.7}
.tk-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.tk-btns .btn{min-height:42px}
.tk-snooze{display:inline-flex;gap:4px}
/* audit map */
.tk-map{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.tk-map .m{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.tk-map .m.on{background:var(--okbg);color:var(--ok);border-color:transparent}.tk-map .m.bad{background:var(--badbg);color:var(--bad)}
.tk-map .m svg.i{width:14px;height:14px}
.tk-audit{border-inline-start:2px solid var(--line);margin:6px 0 0 8px;padding-inline-start:14px;display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.tk-audit .e{position:relative;color:var(--ink2)}.tk-audit .e::before{content:"";position:absolute;inset-inline-start:-20px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--line);border:2px solid var(--paper)}
.tk-audit .e.k-done::before,.tk-audit .e.k-checked::before{background:var(--ok)}.tk-audit .e.k-started::before{background:var(--blue)}.tk-audit .e.k-waiting::before,.tk-audit .e.k-snoozed::before{background:var(--warn)}.tk-audit .e.k-cancelled::before{background:var(--bad)}
.tk-audit .e .w{color:var(--muted);font-size:.76rem}
details.tk-more summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:.86rem;margin:8px 0;list-style:none}
/* import */
.tk-imp-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:10px 0}
.tk-imp-map label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--muted)}
.tk-imp-map select{padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.tk-table{width:100%;border-collapse:collapse;font-size:.8rem}
.tk-table th,.tk-table td{padding:6px 8px;border-bottom:1px solid var(--line2);text-align:start;vertical-align:top}
.tk-table th{color:var(--muted);font-weight:600;white-space:nowrap;position:sticky;top:0;background:var(--surface)}
.tk-scroll{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:12px;background:var(--surface);-webkit-overflow-scrolling:touch}
.tk-note{padding:10px 12px;border-radius:12px;background:var(--frost);color:var(--ink2);font-size:.86rem;margin:8px 0}
.tk-note.warn{background:var(--warnbg);color:#7A4F00}.tk-note.ok{background:var(--okbg);color:var(--ok)}
:root[data-theme="dark"] .tk-note.warn{color:#F2C879}
.tk-note label{display:flex;align-items:center;gap:8px;cursor:pointer}
.tk-imports .item{margin-bottom:6px}
/* the home card */
.tk-home .counts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tk-home .counts .mini.bad{background:var(--badbg);color:var(--bad);border-color:transparent}.tk-home .counts .mini.warn{background:var(--warnbg);color:#7A4F00;border-color:transparent}
.tk-home .item{padding:9px 10px;margin-bottom:6px;cursor:pointer}
.tk-home .item .ic{width:32px;height:32px;border-radius:10px}
.tk-home .item .ic.late{background:var(--badbg);color:var(--bad)}
.tk-empty{padding:26px 14px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);background:var(--surface)}
.tk-offline{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--warn);margin-bottom:8px}
.tk-skel{display:flex;flex-direction:column;gap:8px}.tk-skel .skel{height:56px;border-radius:14px}