/* ==========================================================================
   tasks.css — de Taken-pagina, in vier weergaven

   Eén balk bovenaan en daaronder één van de vier. De balk staat vast bij het
   scrollen, want hij zegt wat je aan het bekijken bent en dat wil je blijven
   zien terwijl je naar beneden gaat.

   Kleur komt uit tokens.css en nergens anders vandaan. De statussen en de
   prioriteiten hebben daar hun eigen tokens gekregen, met een licht en een
   donker paar, want een stip die in donker verdwijnt is geen stip.
   ========================================================================== */

.tk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

/* ==========================================================================
   De balk
   ========================================================================== */

.tk-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
  background: var(--surface-page);
}

.tk-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- weergavepillen ------------------------------------------------------ */

.tk-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.tk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.tk-pill:hover { background: var(--surface-hover); color: var(--text-primary); }
.tk-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* De gekozen weergave is de enige die vol kleur draagt. */
.tk-pill--on,
.tk-pill--on:hover { background: var(--accent); color: var(--accent-ink); }

.tk-pill__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- alles of alleen van jou --------------------------------------------- */

.tk-chips { display: flex; align-items: center; gap: 6px; }

.tk-chip {
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tk-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.tk-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-chip--on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-ink);
}

/* ---- zoeken -------------------------------------------------------------- */

.tk-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 264px;
  max-width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.tk-search:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.tk-search__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.tk-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

.tk-search__input:focus { outline: none; }

/* ---- teller en groeperen -------------------------------------------------- */

.tk-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tk-ghost {
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tk-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); }
.tk-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-new { white-space: nowrap; }

/* ==========================================================================
   Stippen, vlaggetjes en balkjes — overal hetzelfde
   ========================================================================== */

.tk-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--state-backlog);
}

.tk-dot--backlog  { background: var(--state-backlog); }
.tk-dot--planned  { background: var(--state-planned); }
.tk-dot--doing    { background: var(--state-doing); }
.tk-dot--review   { background: var(--state-review); }
.tk-dot--done     { background: var(--state-done); }
.tk-dot--urgent   { background: var(--prio-urgent); }
.tk-dot--high     { background: var(--prio-high); }
.tk-dot--normal   { background: var(--prio-normal); }
.tk-dot--low      { background: var(--prio-low); }
.tk-dot--none     { background: var(--border-strong); }

/* Het streepje links van een kaartje op het bord. */
.tk-flag {
  width: 3px;
  height: 13px;
  flex: none;
  border-radius: 2px;
  background: var(--prio-normal);
}

.tk-flag--urgent { background: var(--prio-urgent); }
.tk-flag--high   { background: var(--prio-high); }
.tk-flag--normal { background: var(--prio-normal); }
.tk-flag--low    { background: var(--prio-low); }

.tk-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.tk-none { color: var(--text-faint); }

/* ---- uitklappen: het driehoekje, en wat eronder komt ---------------------

   Een taak met deeltaken laat ze hier zien in plaats van alleen in het paneel.
   Het driehoekje staat vóór het vinkje en alleen waar er iets onder hangt.
   -------------------------------------------------------------------------- */

.tk-lead { display: flex; align-items: center; gap: 2px; }

.tk-fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.tk-fold:hover { background: var(--surface-hover); color: var(--text-primary); }
.tk-fold--none { pointer-events: none; }
.tk-fold:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-fold__icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms var(--ease, ease);
}
.tk-fold--on .tk-fold__icon,
.tk-card__steps--on .tk-fold__icon { transform: rotate(90deg); }

/* De uitgeklapte regels. Ze staan in dezelfde kolommen als de taak erboven,
   maar dragen alleen wat van hén is: een vinkje, een naam, en hoeveel er onder
   hén weer af is. Deadline, prioriteit en naam staan op de taak; die hier
   herhalen zou vijf keer hetzelfde zeggen. */
.tk-row.tk-sub {
  min-height: 34px;
  background: var(--surface-sunken);
}
.tk-sub:hover { background: var(--surface-hover); }

/* Inspringen doet de eerste kolom, niet de opvulling: de kolom erna vangt het
   verschil op, dus alles rechts blijft op één lijn staan met de taak erboven.
   Het streepje links laat zien waar de regel onder hangt. */
.tk-sub--d1 { --tk-lead: 64px; }
.tk-sub--d2 { --tk-lead: 82px; }
.tk-sub--d3 { --tk-lead: 100px; }
.tk-sub--d4 { --tk-lead: 118px; }
.tk-sub--d5 { --tk-lead: 136px; }

.tk-sub--d1 .tk-lead { justify-content: flex-end; }
.tk-sub--d2 .tk-lead,
.tk-sub--d3 .tk-lead,
.tk-sub--d4 .tk-lead,
.tk-sub--d5 .tk-lead { justify-content: flex-end; }

.tk-sub--d1 { box-shadow: inset 34px 0 0 -33px var(--border-strong); }
.tk-sub--d2 { box-shadow: inset 52px 0 0 -51px var(--border-strong); }
.tk-sub--d3 { box-shadow: inset 70px 0 0 -69px var(--border-strong); }
.tk-sub--d4 { box-shadow: inset 88px 0 0 -87px var(--border-strong); }
.tk-sub--d5 { box-shadow: inset 106px 0 0 -105px var(--border-strong); }

.tk-sub__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-sub__text:hover { color: var(--text-primary); text-decoration: underline; }
.tk-sub--done .tk-sub__text { color: var(--text-muted); text-decoration: line-through; }
.tk-sub__note { width: 12px; height: 12px; flex: none; color: var(--text-muted); }

/* ---- en op een kaartje ---- */

.tk-card__subs {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 2px;
}

.tk-card__sub { display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding: 2px 0; }
.tk-card__sub .tk-flag { height: 11px; margin-top: 3px; }
.tk-card__sub .tk-check { margin-top: 1px; }
.tk-card__sub .tk-due { font-size: var(--text-2xs); }

.tk-card__sub-body { min-width: 0; flex: 1; display: grid; gap: 1px; }
.tk-card__sub-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tk-card__sub-prio { font-size: var(--text-2xs); color: var(--text-muted); }
.tk-card__sub-prio.tk-prio--urgent { color: var(--critical-ink); font-weight: 600; }
.tk-card__sub-prio.tk-prio--high { color: var(--warning-ink); font-weight: 600; }
.tk-card__sub--d1 { padding-left: 12px; }
.tk-card__sub--d2 { padding-left: 24px; }
.tk-card__sub--d3 { padding-left: 36px; }

.tk-card__sub-text {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-card__sub-text:hover { color: var(--text-primary); text-decoration: underline; }
.tk-card__sub--done .tk-card__sub-text { color: var(--text-muted); text-decoration: line-through; }

.tk-card__sub-n {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* Gekozen om samen te bewerken, en waar de cursor van het toetsenbord staat.
   Twee verschillende dingen, dus twee verschillende tekens: een rand rondom
   voor gekozen, een streep aan de zijkant voor waar je staat.

   De vulling is dezelfde lichte tint als bij een open rij, en om dezelfde
   reden: --accent-soft in zijn geheel duwt de code en de projectnaam onder AA.
   Gemeten, niet gegokt. Het aanwijzen zit daarom in de rand, niet in de kleur. */
.tk-row--picked,
.tk-row--picked:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.tk-row--cursor { box-shadow: inset 3px 0 0 var(--text-primary); }
.tk-row--cursor.tk-row--open { box-shadow: inset 3px 0 0 var(--accent); }
/* Allebei tegelijk kan: dan draagt de rij beide tekens. */
.tk-row--picked.tk-row--cursor {
  box-shadow: inset 0 0 0 1px var(--accent), inset 3px 0 0 var(--text-primary);
}

/* De rij — of het kaartje — van de taak die openstaat. Het paneel dekt de
   lijst maar half af; zonder dit is niet te zien wat je hebt aangeklikt.

   De vulling is met opzet lichter dan --accent-soft: de tekst in een rij is
   afgestemd op de paginakleur, en een tint die dieper is dan dit haalt AA niet
   meer voor de code en de projectnaam. Gemeten, niet gegokt. Het streepje
   links draagt daarom het meeste van het aanwijzen. */
.tk-row--open,
.tk-row--open:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-raised));
  box-shadow: inset 3px 0 0 var(--accent);
}
.tk-card--open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* De voortgangsbalk van de deeltaken. */
.tk-bar2 {
  display: block;
  width: 84px;
  height: 5px;
  flex: none;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.tk-bar2--wide { width: 100%; height: 7px; margin-bottom: var(--space-3); }

.tk-bar2__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.tk-bar2__fill--all { background: var(--state-done); }

.tk-bar2__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}

/* Deadlines. Te laat en bijna is het enige dat opvalt; de rest is gewoon een
   datum, want een lijst waarin alles schreeuwt zegt niets. */
.tk-due {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tk-due--soon { color: var(--warning-ink); font-weight: 600; }
.tk-due--late { color: var(--critical-ink); font-weight: 600; }
.tk-due--done,
.tk-due--none { color: var(--text-muted); }

/* Het vinkje. */
.tk-check {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 1.6px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  position: relative;
}

.tk-check--sm { width: 16px; height: 16px; }
.tk-check--xs { width: 14px; height: 14px; border-width: 1.4px; }
.tk-check--xs.tk-check--on::after { left: 3.5px; top: 0.5px; width: 4px; height: 7px; }

.tk-check:hover:not(:disabled) { border-color: var(--accent); }
.tk-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tk-check:disabled { cursor: not-allowed; opacity: .5; }

.tk-check--on { background: var(--accent); border-color: var(--accent); }

.tk-check--on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tk-check--sm.tk-check--on::after { left: 4px; top: 1px; width: 4px; height: 8px; }

/* ==========================================================================
   Lijst
   ========================================================================== */

.tk-list {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}

/* Eén kolomdefinitie voor de kop en voor elke regel, zodat ze niet uit elkaar
   kunnen lopen. */
.tk-list__head,
.tk-row {
  display: grid;
  /* De eerste kolom is een variabele, want een uitgeklapte deeltaak springt in
     door alleen díe breder te maken. Zo hoeft geen enkele breedte-uitzondering
     hieronder te weten dat er ingesprongen wordt. */
  grid-template-columns:
    var(--tk-lead, 46px) minmax(0, 1fr) 170px 120px 120px 110px 64px;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.tk-list__head {
  height: 38px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.tk-list__th {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* De eerste kop staat boven de titelkolom en niet boven het vinkje. */
.tk-list__th.tk-col--task { grid-column: 2; }
.tk-list__th.tk-col--who { grid-column: 3; }
.tk-list__th.tk-col--due { grid-column: 4; }
.tk-list__th.tk-col--prio { grid-column: 5; }
.tk-list__th.tk-col--prog { grid-column: 6; }
.tk-list__th.tk-col--act { grid-column: 7; }

.tk-group + .tk-group { border-top: 1px solid var(--border-subtle); }

.tk-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}

.tk-group__name { font-size: var(--text-sm); font-weight: 600; }

.tk-group__count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tk-row {
  min-height: 46px;
  border-bottom: 1px solid var(--border-subtle);
}

.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: var(--surface-hover); }

.tk-row--done .tk-title { color: var(--text-muted); text-decoration: line-through; }

.tk-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.tk-col--task { gap: var(--space-3); }

.tk-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-title:hover { color: var(--accent-strong, var(--accent)); text-decoration: underline; }

.tk-where {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.tk-where:hover { color: var(--text-secondary); text-decoration: underline; }

.tk-who__name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De prioriteit is een keuzelijst die eruitziet als een label: het streepje
   ervoor draagt de kleur, de tekst blijft gewoon leesbaar. */
.tk-prio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); }

.tk-prio__bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--prio-normal);
}

.tk-prio--urgent .tk-prio__bar { background: var(--prio-urgent); }
.tk-prio--high .tk-prio__bar   { background: var(--prio-high); }
.tk-prio--low .tk-prio__bar    { background: var(--prio-low); }

.tk-prio-pick {
  width: 100%;
  height: 28px;
  padding: 0 var(--space-5) 0 var(--space-2);
  border: 1px solid transparent;
  border-left: 3px solid var(--prio-normal);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  appearance: none;
}

.tk-prio-pick:hover { border-color: var(--border-subtle); border-left-color: var(--prio-normal); background: var(--surface-raised); }
.tk-prio-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-prio-pick.tk-prio--urgent { border-left-color: var(--prio-urgent); color: var(--critical-ink); font-weight: 600; }
.tk-prio-pick.tk-prio--high   { border-left-color: var(--prio-high); color: var(--warning-ink); font-weight: 600; }
.tk-prio-pick.tk-prio--low    { border-left-color: var(--prio-low); }

.tk-prio-pick.tk-prio--urgent:hover { border-color: var(--border-subtle); border-left-color: var(--prio-urgent); }
.tk-prio-pick.tk-prio--high:hover   { border-color: var(--border-subtle); border-left-color: var(--prio-high); }
.tk-prio-pick.tk-prio--low:hover    { border-color: var(--border-subtle); border-left-color: var(--prio-low); }

.tk-notes { display: inline-flex; color: var(--text-muted); }
.tk-notes:hover { color: var(--accent-strong, var(--accent)); }

.tk-notes__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- inline toevoegen ---------------------------------------------------- */

.tk-add { padding: var(--space-2) var(--space-4); }

.tk-add__open {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 2px 0;
}

.tk-add__open:hover { color: var(--accent-strong, var(--accent)); }
.tk-add__open:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- de maker: één regel in de lijst ------------------------------------ */

.tk-compose {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--accent-soft);
}

/* Een gestippeld vinkje op de plek waar het echte komt te staan: de regel is
   al een taak in wording, en dat hoort hij te laten zien. */
.tk-compose__box {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.6px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.tk-compose__input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 500;
}
.tk-compose__input:focus { outline: none; }
.tk-compose__input::placeholder { color: var(--text-muted); font-weight: 400; }

.tk-compose__lands { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.tk-compose__label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Op de zachte accentkleur van deze regel haalt --text-muted geen AA meer;
     op wit wel. Meten is de enige manier om daarachter te komen. */
  color: var(--text-secondary);
  white-space: nowrap;
}

.tk-compose__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
}
.tk-compose__chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.tk-compose__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tk-compose__chip--backlog .tk-dot { background: var(--state-backlog); }
.tk-compose__chip--planned .tk-dot { background: var(--state-planned); }
.tk-compose__chip--doing .tk-dot   { background: var(--state-doing); }
.tk-compose__chip--review .tk-dot  { background: var(--state-review); }
.tk-compose__chip--done .tk-dot    { background: var(--state-done); }

.tk-compose__esc {
  height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.tk-compose__esc:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ---- de gedeeld-chip in een rij ----------------------------------------- */

.tk-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--good-bg);
  border: 1px solid var(--good-line);
  color: var(--good-ink);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* De tekentjes in een rij: komt terug, en er staat nog iets in de weg. */
.tk-mark-wrap {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
}
.tk-mark-wrap--held { color: var(--warning-ink); }
.tk-mark {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Een balk die achterloopt draagt dezelfde kleur als de deadline ernaast. */
.tk-bar2__fill--late { background: var(--prio-high); }

.tk-notes__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  margin-left: 4px;
}
.tk-notes__also { width: 11px; height: 11px; margin-left: 5px; opacity: 0.7; }

/* ==========================================================================
   Bord
   ========================================================================== */

.tk-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  align-items: start;
}

.tk-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  min-width: 0;
}

.tk-col--over { border-color: var(--accent); background: var(--accent-soft); }

.tk-col__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.tk-col__name { margin: 0; font-size: var(--text-sm); font-weight: 600; }

.tk-col__count {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tk-col__body { display: grid; gap: var(--space-2); padding: var(--space-2); align-content: start; }

.tk-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.tk-card--mine { cursor: grab; }
.tk-card--mine:hover { border-color: var(--border-strong); }
.tk-card--lifted { opacity: .5; }

.tk-card__top { display: flex; align-items: center; gap: var(--space-2); }

.tk-card__where {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
}

.tk-card__title:hover { color: var(--accent-strong, var(--accent)); }

.tk-card__foot { display: flex; align-items: center; gap: var(--space-2); }

.tk-card__steps {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* De teller is tegelijk de uitklapknop. */
button.tk-card__steps {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px 1px 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
button.tk-card__steps:hover { background: var(--surface-hover); color: var(--text-primary); }
button.tk-card__steps:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   Kalender
   ========================================================================== */

.tk-cal {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}

.tk-cal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.tk-cal__month { margin: 0; font-size: var(--text-lg); text-transform: capitalize; }

.tk-cal__nav { display: flex; gap: 4px; }

.tk-cal__step {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}

.tk-cal__step:hover { border-color: var(--border-strong); color: var(--text-primary); }
.tk-cal__step:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-cal__note { margin: 0 0 0 auto; font-size: var(--text-xs); color: var(--text-muted); }

.tk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--border-subtle);
}

.tk-cal__dayname {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tk-cal__cell {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 108px;
  padding: var(--space-2);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.tk-cal__cell:nth-child(7n) { border-right: 0; }

/* Dagen uit de vorige of volgende maand staan er om de weken heel te houden.
   Ze zijn gedempt en niet onleesbaar: het is een datum die je nog steeds kunt
   lezen, dus hij haalt dezelfde ondergrens als de rest. */
.tk-cal__cell--away { background: var(--surface-sunken); }
.tk-cal__cell--away .tk-cal__num { color: var(--text-muted); }

.tk-cal__num { font-size: var(--text-xs); color: var(--text-secondary); }

.tk-cal__num--today {
  justify-self: start;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-align: center;
}

.tk-cal__task {
  display: block;
  padding: 3px var(--space-2);
  border-left: 3px solid var(--prio-normal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-cal__task:hover { background: var(--accent-soft); color: var(--accent-soft-ink); }
.tk-cal__task--urgent { border-left-color: var(--prio-urgent); }
.tk-cal__task--high   { border-left-color: var(--prio-high); }
.tk-cal__task--low    { border-left-color: var(--prio-low); }

.tk-cal__more { font-size: var(--text-2xs); color: var(--text-muted); padding-left: var(--space-2); }

/* ==========================================================================
   Tijdlijn
   ========================================================================== */

.tk-time {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}

.tk-time__head,
.tk-time__row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
}

.tk-time__head {
  height: 36px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.tk-time__th {
  padding: 0 var(--space-4);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tk-time__scale { display: grid; height: 100%; }

.tk-time__week {
  display: flex;
  align-items: center;
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* Vandaag is één streep over het hele blok, niet een streepje per rij: dat
   laatste leest als een stippellijn en zegt daarmee iets anders. */
.tk-time__body { position: relative; }

.tk-time__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--critical-ink);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

.tk-time__row { min-height: 44px; border-bottom: 1px solid var(--border-subtle); }
.tk-time__row:last-child { border-bottom: 0; }
.tk-time__row:hover { background: var(--surface-hover); }

.tk-time__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-4);
}

.tk-time__name {
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-time__name:hover { color: var(--accent-strong, var(--accent)); text-decoration: underline; }

.tk-time__track { position: relative; height: 30px; }

.tk-time__bar {
  position: absolute;
  top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--prio-normal);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.tk-time__bar:hover { border-color: var(--accent); color: var(--text-primary); }
.tk-time__bar--urgent { border-color: var(--prio-urgent); }
.tk-time__bar--high   { border-color: var(--prio-high); }
.tk-time__bar--low    { border-color: var(--prio-low); }

.tk-time__span { overflow: hidden; text-overflow: ellipsis; }

/* Waar vandaag ligt. Zonder deze streep is een tijdlijn een plaatje. */
.tk-time__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--critical-ink);
  opacity: .6;
  pointer-events: none;
}

.tk-time__foot,
.tk-time__empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tk-time__empty { border-top: 0; }

/* Een gezicht dat in een balk van 24 pixels past. */
.avatar--xs {
  width: 17px;
  height: 17px;
  font-size: 8px;
  flex: none;
}
/* Twee velden naast elkaar in een dialoog. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ==========================================================================
   De balk voor wat je hebt gekozen

   Hij plakt onderaan de pagina zolang er iets gekozen is, want je scrollt
   verder terwijl je kiest en de knoppen moeten mee.
   ========================================================================== */

.tk-picked {
  position: sticky;
  bottom: var(--space-4);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.tk-picked__n { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }

.tk-picked__pick {
  height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.tk-picked__clear {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}
.tk-picked__clear:hover { color: var(--text-primary); }

/* ---- opgeslagen weergaven ---- */

.tk-views { position: relative; }

.tk-views__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  /* Een bewaarde weergave mag heten hoe je wilt. Zonder deze grens rekt de
     langste naam het menu uit tot buiten het scherm; met deze grens wordt hij
     afgekapt en staat hij voluit in de tooltip. */
  max-width: 280px;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.tk-views__row { display: flex; align-items: center; gap: 2px; }

.tk-views__use {
  flex: 1;
  min-width: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-views__use:hover { background: var(--surface-hover); }

.tk-views__drop {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tk-views__drop:hover { background: var(--critical-bg); color: var(--critical-ink); }

.tk-views__empty { padding: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

.tk-views__save {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: var(--space-2);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.tk-views__save:hover { color: var(--text-primary); background: var(--surface-hover); }

/* ==========================================================================
   Het taakpaneel

   Breed, laag over de lijst, en in twee kolommen: links wat de taak IS, rechts
   wat ermee GEBEURD is. Het is een <dialog>, dus Esc, de focusval en het
   scrim komen van de browser en niet uit een script hier.
   ========================================================================== */

.tkp {
  /* base.css zet elke marge op nul, ook de `margin: auto` waarmee een <dialog>
     zichzelf centreert. Hier terugzetten, net als bij .dialog. */
  margin: auto;
  /* Geen min() met een calc() erin. Dat leest als één waarde, maar een browser
     die het niet slikt gooit de hele regel weg — en dan heeft dit venster geen
     breedte en geen hoogtegrens meer, groeit het buiten het scherm, en scrolt
     de kop eruit. Twee losse regels zeggen precies hetzelfde en kunnen ieder
     apart omvallen zonder de ander mee te nemen. */
  /* De maat uit het ontwerp: 940 breed, 86% van de schermhoogte. Geschreven
     als twee losse regels — zie de opmerking hieronder over min(). */
  width: 94vw;
  max-width: 940px;
  height: 86vh;
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Een kolom in plaats van een hoogte die de kop uitrekent: de kop neemt wat
     hij nodig heeft en het lijf krijgt de rest. Met een vast getal viel het
     reageervak onder de rand zodra de kop op een tweede regel kwam. */
  display: flex;
  flex-direction: column;
}

.tkp::backdrop { background: var(--scrim); }

/* ---- de kop ---- */

.tkp__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  flex-wrap: wrap;
}

.tkp__code { flex: none; }

.tkp__state {
  flex: none;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.6;
}

/* De pil draagt de kleur van de stand, zoals in het ontwerp. De tekst blijft
   de tekstkleur: een woord van elf pixels op een gekleurde vulling is geen
   contrast maar een gok. De tint komt van de statuskleur met veel wit ernaast,
   dus hij blijft in beide thema's een achtergrond en geen vlak. */
.tkp__state--backlog { background: color-mix(in srgb, var(--state-backlog) 16%, var(--surface-raised)); border-color: color-mix(in srgb, var(--state-backlog) 34%, var(--surface-raised)); }
.tkp__state--planned { background: color-mix(in srgb, var(--state-planned) 14%, var(--surface-raised)); border-color: color-mix(in srgb, var(--state-planned) 32%, var(--surface-raised)); }
.tkp__state--doing   { background: color-mix(in srgb, var(--state-doing) 15%, var(--surface-raised)); border-color: color-mix(in srgb, var(--state-doing) 34%, var(--surface-raised)); }
.tkp__state--review  { background: color-mix(in srgb, var(--state-review) 14%, var(--surface-raised)); border-color: color-mix(in srgb, var(--state-review) 32%, var(--surface-raised)); }
.tkp__state--done    { background: color-mix(in srgb, var(--state-done) 15%, var(--surface-raised)); border-color: color-mix(in srgb, var(--state-done) 34%, var(--surface-raised)); }

button.tkp__state { cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
button.tkp__state:disabled { cursor: default; }
button.tkp__state:focus-visible { outline: none; box-shadow: var(--focus-ring); }

select.tkp__state {
  padding-right: var(--space-5);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px top 52%, right 7px top 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Het streepje links van de statusnaam draagt de kleur, de tekst niet: vijf
   statussen in vijf tinten op tien pixels hoog is een kleurenblindheidstest. */
.tkp__state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--state-backlog);
}
.tkp__state--backlog::before { background: var(--state-backlog); }
.tkp__state--planned::before { background: var(--state-planned); }
.tkp__state--doing::before   { background: var(--state-doing); }
.tkp__state--review::before  { background: var(--state-review); }
.tkp__state--done::before    { background: var(--state-done); }
select.tkp__state::before    { content: none; }

.tkp__where {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkp__where:hover { color: var(--text-primary); text-decoration: underline; }

.tkp__head-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.tkp__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.tkp__act:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-subtle); }
.tkp__act-icon,
.tkp__close-icon,
.tkp__pencil-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.tkp__act-icon { width: 15px; height: 15px; }

.tkp__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.tkp__save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state-done);
  flex: none;
}
.tkp__save--saving .tkp__save-dot { background: var(--prio-high); }
.tkp__save--failed .tkp__save-dot { background: var(--prio-urgent); }
.tkp__save--off .tkp__save-dot    { background: var(--state-backlog); }

.tkp__del { display: inline-flex; align-items: center; gap: var(--space-2); }

.tkp__delete {
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--text-secondary);
  white-space: nowrap;
}
.tkp__delete:hover {
  background: var(--critical-bg);
  border-color: var(--critical-line);
  color: var(--critical-ink);
}
/* Gevraagd is niet gedaan: de knop wordt de vraag, en pas de tweede klik voert
   hem uit. Daarom draagt hij dan wél de volle waarschuwkleur. */
.tkp__delete--asking,
.tkp__delete--asking:hover {
  background: var(--critical-bg);
  border-color: var(--status-critical);
  color: var(--critical-ink);
  font-weight: 700;
}
.tkp__del-note {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  max-width: 260px;
  line-height: 1.35;
}
.tkp__del-undo {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.tkp__del-undo:hover { color: var(--text-primary); }

.tkp__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
}
.tkp__close:hover { background: var(--surface-hover); color: var(--text-primary); }
.tkp__close-icon { width: 13px; height: 13px; stroke-width: 2; }

/* ---- het lijf, twee kolommen ---- */

.tkp__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  overflow: hidden;
}

.tkp__main {
  padding: var(--space-5) var(--space-5) var(--space-6);
  overflow-y: auto;
  min-width: 0;
}

.tkp__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* De titel is een veld dat eruitziet als een kop. Pas als je hem aanwijst
   verschijnt de rand — anders zou elke taak eruitzien als een formulier. */
.tkp__title--edit {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  padding: 2px var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
}
.tkp__title--edit:hover { border-color: var(--border-subtle); }
.tkp__title--edit:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface-raised);
  box-shadow: var(--focus-ring);
}

/* ---- kruimelpad van een deeltaak ---- */

.tkp__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}
.tkp__crumb {
  color: var(--text-secondary);
  text-decoration: none;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkp__crumb:hover { color: var(--text-primary); text-decoration: underline; }
.tkp__crumb--root {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--accent-soft-ink);
}
.tkp__crumb--here { color: var(--text-muted); }
.tkp__crumb-sep { color: var(--text-muted); }

/* ---- de feiten ---- */

.tkp__facts {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.tkp__fact-label { font-size: var(--text-sm); color: var(--text-muted); }
.tkp__fact-value { font-size: var(--text-sm); color: var(--text-primary); min-width: 0; }
.tkp__who { display: flex; align-items: center; gap: var(--space-2); }

.tkp__prio-flat { font-weight: 600; }
.tk-prio--urgent.tkp__prio-flat { color: var(--critical-ink); }
.tk-prio--high.tkp__prio-flat   { color: var(--warning-ink); }
.tk-prio--normal.tkp__prio-flat,
.tk-prio--low.tkp__prio-flat    { color: var(--text-secondary); }

select.tkp__repeat {
  padding: 3px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
select.tkp__repeat:focus-visible { outline: none; box-shadow: var(--focus-ring); }

select.tkp__prio {
  padding: 3px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
select.tk-prio--urgent { color: var(--critical-ink); }
select.tk-prio--high   { color: var(--warning-ink); }

.tkp__window { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tkp__pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.tkp__pencil:hover { background: var(--surface-hover); color: var(--text-primary); }
.tkp__pencil-icon { width: 13px; height: 13px; }


.tkp__window-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tkp__window-dash { color: var(--text-muted); }
.tkp__date .input { width: 148px; }

.tkp__chip {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tkp__chip--shared {
  background: var(--good-bg);
  color: var(--good-ink);
  border: 1px solid var(--good-line);
}
/* Ook "nog niet gedeeld" is een chip: een veld dat de ene keer een chip is en
   de andere keer platte tekst leest als twee verschillende velden. */
.tkp__chip--quiet {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* Het merkje achter de twee velden die van de taak komen. */
.tkp__fact-from {
  margin-left: var(--space-2);
  font-size: var(--text-2xs);
  font-style: italic;
  color: var(--text-muted);
  white-space: nowrap;
}

.tkp__quiet { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- de omschrijving ---- */

.tkp__desc { margin-top: var(--space-5); }
.tkp__desc-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.tkp__prose { font-size: var(--text-sm); line-height: 1.7; }

/* ---- de secties ---- */

.tkp__sec { margin-top: var(--space-6); }

.tkp__sec-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tkp__sec-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* De balk vult wat er tussen de titel en de teller overblijft — precies zoals
   in het ontwerp, waar hij de kop van de sectie afmaakt in plaats van eronder
   te hangen. */
.tkp__sec-bar { flex: 1; min-width: 40px; }
.tkp__sec-count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tkp__sec-note { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; }
.tkp__sec-head .tkp__add,
.tkp__sec-head .tkp__file-add { margin-left: auto; }

.tkp__add {
  padding: 4px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.tkp__add:hover { background: var(--surface-hover); color: var(--text-primary); }

.tkp__brief { font-size: var(--text-sm); line-height: 1.7; color: var(--text-secondary); }
.tkp__brief + .tkp__brief { margin-top: var(--space-3); }

/* ---- deeltaken ---- */

.tkp__steps {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tkp__steps > .tkp__quiet { padding: var(--space-4); }

.tkp__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.tkp__step:last-child { border-bottom: 0; }
.tkp__step-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tkp__step-text:hover { text-decoration: underline; }
.tkp__step-kids {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.tkp__step-note { width: 12px; height: 12px; flex: none; color: var(--text-muted); }
.tkp__step--done .tkp__step-text { color: var(--text-muted); text-decoration: line-through; }

/* Inspringen per niveau, met een streepje dat laat zien waar het onder hangt.
   Drie niveaus diep is waar het ophoudt, dus drie regels zijn genoeg. */
.tkp__step--d1, .tkp__step-form.tkp__step--d1 { padding-left: calc(var(--space-4) + 22px); }
.tkp__step--d2, .tkp__step-form.tkp__step--d2 { padding-left: calc(var(--space-4) + 44px); }
.tkp__step--d3, .tkp__step-form.tkp__step--d3 { padding-left: calc(var(--space-4) + 66px); }
.tkp__step--d4, .tkp__step-form.tkp__step--d4 { padding-left: calc(var(--space-4) + 88px); }
.tkp__step--d1 { box-shadow: inset 14px 0 0 -13px var(--border-strong); }
.tkp__step--d2 { box-shadow: inset 36px 0 0 -35px var(--border-strong); }
.tkp__step--d3 { box-shadow: inset 58px 0 0 -57px var(--border-strong); }
.tkp__step--d4 { box-shadow: inset 80px 0 0 -79px var(--border-strong); }

.tkp__sub-btn {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
/* Deze staat er altijd, niet pas als je erover zweeft: een deeltaak onder een
   deeltaak is precies het soort ding dat niemand ontdekt als je het verstopt. */
.tkp__sub-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.tkp__sub-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tkp__step-drop {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
}
.tkp__step:hover .tkp__step-drop,
.tkp__link:hover .tkp__step-drop,
.tkp__file:hover .tkp__step-drop,
.tkp__step-drop:focus-visible { opacity: 1; }
.tkp__step-drop:hover { background: var(--critical-bg); color: var(--critical-ink); }

.tkp__step-add {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: none;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.tkp__steps > .tkp__step-add:first-child { border-top: 0; }
.tkp__step-add:hover { background: var(--surface-hover); color: var(--text-primary); }

.tkp__step-form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.tkp__step-form .input { flex: 1; min-width: 0; }

/* ---- gekoppelde taken ---- */

.tkp__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.tkp__link:last-child { border-bottom: 0; }

.tkp__link-kind {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-line);
  background: var(--neutral-bg);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--neutral-ink);
  white-space: nowrap;
}
/* Blokkeren is het enige verband dat je tegenhoudt, dus dat is het enige dat
   alarmkleur draagt. Gevolgd worden is een waarschuwing, samenhangen is een
   mededeling. */
.tkp__link-kind--blocks     { background: var(--critical-bg); border-color: var(--critical-line); color: var(--critical-ink); }
.tkp__link-kind--blockedBy  { background: var(--warning-bg);  border-color: var(--warning-line);  color: var(--warning-ink); }
.tkp__link-kind--follows,
.tkp__link-kind--followedBy { background: var(--info-bg);     border-color: var(--info-line);     color: var(--info-ink); }

.tkp__link-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkp__link-title:hover { text-decoration: underline; }
.tkp__link-state { flex: none; }

/* ---- de koppelkiezer, in de sectie zelf ---- */

.tkp__linker {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.tkp__linker-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.tkp__linker-kind {
  padding: 3px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tkp__linker-kind:hover { color: var(--text-primary); border-color: var(--border-strong); }
.tkp__linker-kind--on { border-color: currentColor; background: var(--surface-raised); }
.tkp__linker-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}
.tkp__linker-close:hover { color: var(--text-primary); }

.tkp__linker-search { width: 100%; }

.tkp__linker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: 2px;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.tkp__linker-row:hover { background: var(--surface-hover); }
.tkp__linker-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tkp__linker-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tkp__link-state {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- documenten ---- */

/* Het vak neemt ook bestanden aan die je erop laat vallen; als er niets in
   staat zegt het dat met zoveel woorden in plaats van "geen documenten". */
.tkp__drop { border-radius: var(--radius-md); }
.tkp__drop--empty {
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--border-strong);
  text-align: center;
}
.tkp__drop--over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  background: var(--accent-soft);
}

.tkp__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.tkp__file + .tkp__file { margin-top: var(--space-2); }

.tkp__file-kind {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Vier families, zoals in het ontwerp: een tabel is groen, een pdf rood, een
   tekst blauw, een plaatje grijs. Zo zie je aan de rij wat voor bestand het is
   zonder de extensie te lezen. */
.tkp__file-kind--sheet   { background: var(--good-bg);     border-color: var(--good-line);     color: var(--good-ink); }
.tkp__file-kind--doc-red { background: var(--critical-bg); border-color: var(--critical-line); color: var(--critical-ink); }
.tkp__file-kind--text    { background: var(--info-bg);     border-color: var(--info-line);     color: var(--info-ink); }
.tkp__file-kind--image   { background: var(--neutral-bg);  border-color: var(--neutral-line);  color: var(--neutral-ink); }
.tkp__file-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkp__file-name:hover { text-decoration: underline; }
.tkp__file-size,
.tkp__file-when { flex: none; font-size: var(--text-xs); color: var(--text-muted); }

/* ---- het logboek ---- */

.tkp__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-5);
  border-left: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.tkp__side-title { margin-bottom: var(--space-4); }

.tkp__feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.tkp__feed-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.tkp__feed-face { flex: none; margin-top: 1px; }
.tkp__feed-text { min-width: 0; }
.tkp__feed-line { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.tkp__feed-who { color: var(--text-primary); font-weight: 600; }
.tkp__feed-body {
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tkp__feed-when { margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }

.tkp__mention { color: var(--accent-soft-ink); font-weight: 600; }

/* ---- reageren ---- */

.tkp__comment {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.tkp__comment-input {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--text-sm);
}
.tkp__comment-input:focus { outline: none; box-shadow: none; }

.tkp__comment-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.tkp__comment-hint {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Smaller dan een bureau

   De balk wordt twee regels, de lijst laat de kolommen vallen die het minst
   zeggen, en het bord schuift opzij. Een tabel van zeven kolommen op 390
   pixels is geen tabel maar een puzzel.
   ========================================================================== */

@media (max-width: 1180px) {
  .tk-list__head,
  .tk-row { grid-template-columns: var(--tk-lead, 46px) minmax(0, 1fr) 120px 110px 90px 44px; }
  .tk-list__th.tk-col--who { display: none; }
  .tk-col--who { display: none; }
  .tk-list__th.tk-col--due { grid-column: 3; }
  .tk-list__th.tk-col--prio { grid-column: 4; }
  .tk-list__th.tk-col--prog { grid-column: 5; }
  .tk-list__th.tk-col--act { grid-column: 6; }

  .tkp__body { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); }
}

/* Twee kolommen naast elkaar houdt op zodra de rechterkolom smaller wordt dan
   de zinnen die erin staan. Vanaf hier gaat het logboek eronder in plaats van
   ernaast: het paneel wordt één kolom die je van boven naar beneden leest. */
@media (max-width: 900px) {
  .tkp {
    width: calc(100vw - 1.5rem);
    max-width: none;
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
  }

  .tkp__body {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .tkp__main { overflow: visible; padding: var(--space-4); }

  .tkp__side {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4);
  }

  .tkp__feed { overflow: visible; }

  /* De kop wordt twee regels: eerst wat de taak IS, dan wat je ermee kunt. */
  .tkp__head { padding: var(--space-3); row-gap: var(--space-2); }
  .tkp__where { flex-basis: 100%; order: 3; }
  .tkp__head-right { order: 2; }
  .tkp__facts { grid-template-columns: 112px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* De maker wordt twee regels: eerst wat er moet gebeuren, dan waar het
     landt. Op deze breedte past "Komt in · project · status · Opslaan · Esc"
     niet meer naast een veld waar je een zin in typt. */
  .tk-compose { flex-wrap: wrap; row-gap: var(--space-2); }
  .tk-compose__input { flex: 1 1 200px; }
  .tk-compose__lands { flex: 1 1 100%; flex-wrap: wrap; }
  .tk-compose__chip { max-width: 150px; }
}

@media (max-width: 620px) {
  /* De verwijdervraag: de knop zegt hem al, dus het regeltje eronder mag weg
     voordat de kop over de rand loopt. */
  .tkp__del-note { display: none; }
  .tkp__head-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

  /* Het bolletje blijft, het woord erbij niet: op deze breedte kost "Automatisch
     opgeslagen" de plek van de knop waar het naast staat. De toestand wordt ook
     hardop gemeld, dus er gaat niets verloren. */
  .tkp__save-text { display: none; }
  .tkp__title { font-size: var(--text-xl); }
  .tkp__facts { grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-3); }
  .tkp__fact-label { margin-top: var(--space-2); }
  .tkp__link { flex-wrap: wrap; }
  .tkp__link-kind { min-width: 0; flex-basis: 100%; }
  .tkp__file-when { display: none; }
  .tkp__sub-btn,
  .tkp__step-drop { opacity: 1; }
  .tkp__comment-hint { display: none; }
}

@media (max-width: 860px) {
  .tk-bar { position: static; }
  .tk-search { width: 100%; order: 5; }
  /* Vier dingen op één regel passen niet naast elkaar op een telefoon: het
     aantal, waarop gegroepeerd, de bewaarde weergaven en de knop om iets te
     maken. Ze mogen doorlopen naar de volgende regel — anders duwt de laatste
     de hele pagina buiten het scherm. */
  .tk-bar__right {
    width: 100%;
    order: 6;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  /* Het menu hangt met zijn rechterkant onder de knop; op een telefoon is dat
     de kant waar het scherm ophoudt, dus daar hoort ook de grens te liggen. */
  .tk-views__menu { max-width: calc(100vw - 2rem); }

  .tk-pills { overflow-x: auto; max-width: 100%; }

  .tk-list__head,
  .tk-row { grid-template-columns: var(--tk-lead, 46px) minmax(0, 1fr) 96px 78px; }
  /* Op een telefoon springt hij minder ver in: elke pixel is er de naam. */
  .tk-sub--d1 { --tk-lead: 58px; }
  .tk-sub--d2 { --tk-lead: 70px; }
  .tk-sub--d3 { --tk-lead: 82px; }
  .tk-sub--d4 { --tk-lead: 94px; }
  .tk-sub--d5 { --tk-lead: 106px; }
  .tk-list__th.tk-col--prog,
  .tk-list__th.tk-col--act,
  .tk-col--prog,
  .tk-col--act { display: none; }
  .tk-list__th.tk-col--due { grid-column: 3; }
  .tk-list__th.tk-col--prio { grid-column: 4; }

  .tk-where { display: none; }

  /* Een gantt op een telefoon moet opzij kunnen. Twaalf weken over 250 pixels
     verdelen geeft kolommen van twintig pixels waar "6 jul" niet in past, en
     dan loopt de kop over de rand. Dus een echte minimumbreedte, en schuiven. */
  .tk-time { overflow-x: auto; }
  .tk-time__head,
  .tk-time__body { min-width: 620px; }
  .tk-time__head,
  .tk-time__row { grid-template-columns: 140px minmax(0, 1fr); }
  .tk-time__week { padding-left: 4px; }

  .tk-cal__cell { min-height: 76px; }
  .tk-cal__task { font-size: var(--text-2xs); }
}

@media print {
  .tk-bar { display: none !important; }
  .tk-list, .tk-cal, .tk-time { border: 0 !important; }
  .tk-board { overflow: visible !important; }
}

/* Een verwijzing naar een taak die er niet meer is. Het paneel blijft, want
   het is nog steeds het antwoord op wat je aanklikte — het zegt alleen iets
   anders. */
.tkp__body--gone {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-6) var(--space-5) var(--space-8);
  overflow-y: auto;
}