/* Mijn taken. Vlakke kaarten, 1px-randen (huisstijl). */
.taken-lijst { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.taken-bezig { color: var(--muted); font-size: var(--fs-data); }

.taak {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.taak__dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--muted);
}
.taak__dot--let-op { background: var(--warn); }
.taak__dot--urgent { background: var(--err); }
.taak__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* De body is een knop: open de taak ter bewerking. Knop-uiterlijk neutraliseren. */
.taak__open { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.taak__open:hover .taak__titel { color: var(--blue-700); text-decoration: underline; }
.taak__open:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 2px; border-radius: var(--radius-sm); }
.taak__titel { font-size: var(--fs-data); font-weight: 600; color: var(--ink-900); }
/* Icoon op de EERSTE tekstregel uitlijnen (flex-start + kleine top-marge) in
   plaats van verticaal centreren: op een smal scherm wrapt de brontekst over
   meerdere regels en dan zweefde het icoon midden in het tekstblok (B-122).
   Bij een regel is het optisch identiek aan centreren. */
.taak__bron { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-data); color: var(--muted); }
.taak__bron svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; }
/* Einddatum/herinnering in de rij; verstreken = rood (met tekstueel signaal). */
.taak__meta { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-data); color: var(--muted); }
.taak__meta svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; }
.taak__meta--telaat { color: var(--err); font-weight: 600; }
/* Urgentie als zichtbaar woord (niet-kleur-afhankelijk signaal naast de dot). */
.taak__urg { font-size: var(--fs-data); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.taak__urg--let-op { color: var(--warn); }
.taak__urg--urgent { color: var(--err); }
.taak__acties { flex: 0 0 auto; display: inline-flex; gap: 6px; }

/* Onlangs afgerond: gedempte sectie onder de open taken; Heropenen draait een
   (per ongeluk) afgeronde taak terug. */
.taken-kop {
  margin: 22px 0 10px;
  font-size: var(--fs-data);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.taak--afgerond { background: var(--bg-50); }
.taak--afgerond .taak__dot { background: var(--line); }
.taak--afgerond .taak__titel {
  color: var(--muted);
  font-weight: 500;
  text-decoration: line-through;
}