/* ============================================================
   Datamart — DS.TaskList — JEDEN výpis úkolů (deal drawer,
   osoba, schůzka, přehled /tasks). Anatomie řádku: hairline
   řádek = kulatý checkbox (accent) · název · počty · disclosure
   · termín (Dnes = warning, po termínu = critical) · řešitel
   (avatar ± jméno). Tři šířkové režimy: úzké · široké · plné
   (.tl-full — sloty Obchod/Kontakty + tiché záhlaví sloupců).
   Skupinové lišty, AI návrhy s overlay hover akcemi, ghost
   „Přidat úkol / podúkol". Pairs with _ds/task-list.js.
   Load after colors_and_type.css.
   ============================================================ */
.tl { display: flex; flex-direction: column; min-width: 0; }

/* progress header */
.tl-prog { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.tl-prog .l { font: 500 12px var(--font-mono); color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.tl-prog .bar { width: 84px; height: 6px; border-radius: var(--radius-pill); background: var(--line-200); overflow: hidden; flex: none; }
.tl-prog .bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--positive); }

/* grouped container — flat children: .tl-grp / .tl-row / .tl-addrow */
.tl-grouped { display: flex; flex-direction: column; min-width: 0; }

/* group bar (suggested → count, progress → total/done) */
/* mezera mezi skupinami = --sp-6 (F70, AD 10. 8. 2026 — na /tasks byly sekce nalepené);
   barva popisku zůstává --fg-secondary z picku P146 */
.tl-grp { display: flex; align-items: center; gap: var(--sp-2); min-height: 26px; padding: var(--sp-1) var(--sp-5); margin-top: var(--sp-6); border-bottom: 1px solid var(--border); }
.tl-grouped > .tl-grp:first-child { margin-top: 0; }
/* AD 31. 7. 2026 (pick P146): popisek skupiny je --fg-secondary, ne --ink-900.
   Group bar je DĚLIČ UVNITŘ sekce, jejíž vlastní nadpis je podle karty Section block
   --fg-secondary (úroveň A) / --ink-500 (úroveň B). Nejtmavší ink na děliči obracel
   hierarchii — vnořená úroveň byla tmavší než ta nadřazená. Platí všude, kde .tl-grp je;
   osa aktivit byla jen místo, kde se to potkalo s railem a bylo to vidět. */
.tl-grp .l { font: 650 12px var(--font-display); color: var(--fg-secondary); letter-spacing: -0.01em; }
.tl-grp .cnt { font: 600 11px var(--font-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.tl-grp .bar { width: 84px; height: 6px; margin-left: auto; border-radius: var(--radius-pill); background: var(--line-200); overflow: hidden; flex: none; }
.tl-grp .bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--positive); }

/* task row — hairline pod řádkem; hloubka stromu přes --tl-depth (nastavuje JS) */
.tl-row { display: flex; align-items: center; gap: var(--sp-4); min-height: 44px; padding: 0 var(--sp-5); padding-left: calc(var(--sp-5) + var(--tl-depth, 0) * 28px); border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { background: var(--hover-surface); }

/* disclosure — trailing slot ZA názvem (ne levý okap); checkbox drží levou hranu, název plnou šířku */
.tl-disc { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: transparent; border-radius: var(--radius-xs); color: var(--fg-muted); cursor: pointer; }
.tl-disc:hover { background: var(--active-surface); color: var(--fg-secondary); }
.tl-disc .ti { font-size: 14px; transition: transform 120ms ease; }
.tl-disc.open .ti { transform: rotate(90deg); }

/* round checkbox — accent when done */
.tl-rcheck { width: 18px; height: 18px; flex: none; display: grid; place-items: center; padding: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface-100); color: #fff; cursor: pointer; }
.tl-rcheck:hover { border-color: var(--accent); }
.tl-rcheck.on { background: var(--accent); border-color: var(--accent); }
.tl-rcheck .ti { font-size: 12px; }

/* title — shrne se na obsah (ellipsis až při nedostatku místa); počty inline za textem, za nimi disclosure */
.tl-title { flex: 0 1 auto; min-width: 0; font: 500 13px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row.done .tl-title { text-decoration: line-through; color: var(--fg-muted); }

/* counts — comments / subtasks (inline, right after the title text) */
.tl-counts { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); vertical-align: -2px; }
.tl-counts .tc { display: inline-flex; align-items: center; gap: 3px; font: 500 13px/20px var(--font-sans); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.tl-counts .tc .ti { font-size: 13px; }

/* trailing meta — due + owner (+ hover actions on suggestions); margin-left:auto = pravá hrana */
.tl-meta { flex: none; display: inline-flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.tl-rdue { flex: none; min-width: 42px; text-align: right; font: 500 13px/20px var(--font-sans); color: var(--fg-muted); font-variant-numeric: normal; white-space: nowrap; }
.tl-rdue.now { color: var(--warning-ink); }
.tl-rdue.over { color: var(--critical-ink); }
/* owner name = DS entity reference (mini) — dashed underline is the affordance */
.tl-person { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0 1px; background: none; border: 0; border-radius: var(--radius-xs); font: inherit; cursor: pointer; }
/* named owner — fixed column so due dates align regardless of name length */
.tl-meta .tl-person:not(:only-child) { width: 148px; }
.tl-person .nm { overflow: hidden; text-overflow: ellipsis; }
.tl-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-person .nm { flex: 1; min-width: 0; text-align: left; font: 500 12px var(--font-sans); color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline dashed var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tl-person:hover .nm { color: var(--ink-900); text-decoration-color: var(--ink-500); }
.tl-av { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 9px var(--font-display); color: hsl(var(--av-hue) 52% 42%); background: var(--surface-75); border: 1.5px solid hsl(var(--av-hue) 62% 60%); }

/* ------------------------------------------------------------
   TŘETÍ ŠÍŘKOVÝ REŽIM — „plné" (přehled /tasks). Úzké (drawer,
   avatar) → široké (detail, jméno) → PLNÉ: tentýž řádek edge-to-edge
   + JEDEN slot provázaných entit (obchod první, pak kontakty — F74,
   AD 10. 8. 2026: oddělené sloupce plodily samé pomlčky) a tiché
   záhlaví sloupců. NENÍ to tabulka: jedna řádková anatomie, plné jen
   PŘIDÁVÁ slot. Zarovnání sloupců NEDĚLÁ pevný sloupec disclosure:
   pravý blok (Provázané · meta) je pevně široký a `margin-left: auto`
   ho zarovná na pravou hranu — pozice sloupců je proto nezávislá na
   tom, jestli řádek disclosure má, i na délce názvu.
   Chipy uvnitř slotu jsou kanonická entity reference (.eref-chip —
   karta Entity reference); styly nese HOSTITEL (v kartě inline
   <style>, v appce ds.css), NE tenhle engine.
   ------------------------------------------------------------ */
/* --tl-w-due: nejdelší termín „28. 11. 27 14:30" = 95 px v Inter 500 13 (změřeno,
   F127/P289) — 64 px lámalo datum+čas na dva řádky */
.tl-full { --tl-w-rel: 440px; --tl-w-due: 96px; --tl-w-owner: 52px; }

/* slot provázaných — v klidu skrytý; zapíná ho až breakpoint (D10) */
.tl-rel { display: none; align-items: center; gap: var(--sp-2); flex: none; min-width: 0; }
.tl-rel > .eref-chip { min-width: 0; }
/* kontextová velikost chipu ve slotu výpisu — základ chipu nese hostitel (ds.css),
   tohle je jediné pravidlo enginu k .eref-chip: zmenšení textu v plném režimu */
.tl-full .tl-rel .eref-chip-nm { font-size: 12px; }
/* podúkol vlastní obchod nemá — dědí rodičovský, tlumeně (D6); tlumí se JEN chip obchodu */
.tl-rel > .inh { opacity: 0.55; }
/* bez reference = tichá pomlčka, žádný placeholder ani výzva (D5) */
.tl-none { font: 500 13px/20px var(--font-sans); color: var(--ink-300); }
/* přetečení kontaktů „+N" — kanon z karty Deal card (.tags-more): tiché mono, NE pilulka */
.tl-more { appearance: none; flex: none; margin: 0; padding: 0 var(--sp-0); border: 0; background: none; border-radius: var(--radius-xs); font: 500 11px var(--font-mono); color: var(--fg-muted); cursor: pointer; }
.tl-more:hover { color: var(--ink-900); }
.tl-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* tiché záhlaví sloupců — JEN v plném režimu (kompaktní ho nemá, D3).
   Výška 26px = 4 + 18 + 4 (padding + line-height) — stejně vysoké jako .tl-grp,
   ale bez min-height, ať v appce nepřibývá DIM dluh. */
.tl-head { display: none; align-items: center; gap: var(--sp-4); padding: var(--sp-1) var(--sp-5); border-bottom: 1px solid var(--border); font: 600 11px/18px var(--font-sans); color: var(--fg-muted); }
/* záhlaví je sticky (F71, AD 10. 8. 2026) — hostitel nastaví --tl-head-top (výška vlastní
   lepené lišty nad výpisem) a --tl-head-bg (podklad plochy); default 0 / surface-100. */
.tl-full .tl-head { position: sticky; top: var(--tl-head-top, 0px); z-index: 2; background: var(--tl-head-bg, var(--surface-100)); }
/* záhlaví přebírá roli prvního dítěte — lišta hned za ním nesmí odsazovat
   (pravidlo .tl-grouped > .tl-grp:first-child na ni už nesedí). Platí i pod
   breakpointem, kde je .tl-head display:none — sourozenecký selektor tam platí taky. */
.tl-grouped > .tl-head + .tl-grp { margin-top: 0; }

/* Plný layout se zapíná NAD breakpointem. Pod ním .tl-full nedělá NIC —
   řádek je bajtově shodný se „širokým" (D10); uložená volba uživatele zůstává. */
@media (min-width: 1101px) {
  .tl-full .tl-head { display: flex; }
  .tl-full .tl-rel { display: inline-flex; }
  /* „Úkol" sdílí levou hranu s checkboxy a popisky skupin — žádný spacer (F72, AD 10. 8. 2026) */
  .tl-full .tl-head .tl-hmain { flex: 1; min-width: 0; }
  .tl-full .tl-head .tl-hmeta { flex: none; display: inline-flex; align-items: center; gap: var(--sp-3); width: calc(var(--tl-w-due) + var(--sp-3) + var(--tl-w-owner)); }
  .tl-full .tl-head .tl-hdue { width: var(--tl-w-due); flex: none; }
  .tl-full .tl-head .tl-howner { flex: 1; min-width: 0; text-align: right; }
  /* pravý blok na pravou hranu — jediný auto margin v řádku */
  .tl-full .tl-rel { width: var(--tl-w-rel); margin-left: auto; }
  .tl-full .tl-meta { width: calc(var(--tl-w-due) + var(--sp-3) + var(--tl-w-owner)); margin-left: 0; }
  .tl-full .tl-rdue { width: var(--tl-w-due); min-width: 0; text-align: left; }
  .tl-full .tl-meta > .tl-av, .tl-full .tl-meta > .tl-person { margin-left: auto; }
}

/* AI suggestion actions — OVERLAY přes pravý okraj řádku (AD 10. 8. 2026, D8):
   akce se vykreslí PŘES konec řádku s jemným fade; termín, řešitel ani sloty
   referencí se neskrývají a neposouvají (dřív na hover mizely — display:none). */
.tl-row.sug { position: relative; }
.tl-row.sug:focus-within { background: var(--hover-surface); }
.tl-sugact { display: none; position: absolute; right: 0; top: 0; bottom: 0; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-5) 0 var(--sp-6); background: linear-gradient(90deg, transparent 0, var(--hover-surface) var(--sp-6)); }
.tl-row.sug:hover .tl-sugact, .tl-row.sug:focus-within .tl-sugact { display: inline-flex; }
.tl-sugact button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-100); font: 600 11px var(--font-sans); color: var(--fg-secondary); cursor: pointer; }
.tl-sugact button .ti { font-size: 13px; }
.tl-sugact button:hover { background: var(--hover-surface); color: var(--ink-900); }
.tl-sugact button.dismiss:hover { color: var(--critical-ink); border-color: var(--critical); }
.tl-sugact button.approve { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-sugact button.approve:hover { background: var(--accent-press); border-color: var(--accent-press); color: #fff; }

/* ghost add row — „Přidat úkol / podúkol" */
.tl-addrow { display: flex; align-items: center; gap: var(--sp-4); min-height: 32px; padding: 0 var(--sp-5); padding-left: calc(var(--sp-5) + var(--tl-depth, 0) * 28px); font: 500 13px/20px var(--font-sans); color: var(--fg-muted); cursor: pointer; }
.tl-addrow:hover { background: var(--hover-surface); color: var(--fg-secondary); }
.tl-addrow .ic { width: 18px; flex: none; display: grid; place-items: center; }
.tl-addrow .ic .ti { font-size: 14px; }