/* ==========================================================================
   projects.css — the projects an employee is on
   --------------------------------------------------------------------------
   A list of cards, one project page, and a board. The board is the only piece
   with real interaction, so it gets the most attention: what is yours has to
   look grabbable, what is not has to look settled, and neither may rely on
   hovering to say so.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overview cards
   -------------------------------------------------------------------------- */

.proj-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.proj-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.proj-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.proj-card__code {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.proj-card__name { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); }

.proj-card__summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.proj-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.proj-card__mine { font-size: var(--text-xs); color: var(--text-muted); }
.proj-card__mine--open { color: var(--accent-soft-ink); font-weight: 600; }

/* Overlapping heads, because the point is "these people", not a precise count
   — the count has its own place on the project page. The overlap is small on
   purpose: these are initials, not photographs, and eating a third of a 24px
   circle turns "MB" into "M". Earlier avatars sit on top so the row reads
   left to right. */
.avatar-stack { display: flex; }

.avatar-stack .avatar {
  position: relative;
  width: 24px;
  height: 24px;
  margin-right: -5px;
  font-size: var(--text-2xs);
  box-shadow: 0 0 0 2px var(--surface-raised);
}

.avatar-stack .avatar:last-child { margin-right: 0; }

/* The face in front covers the left of the face behind it: 5px of overlap plus
   its 2px ring, 7px in all. Initials centred in the whole circle are therefore
   centred underneath that cover, and two-letter initials lose the left of the
   first letter — "MO" reads as "ЛO". Padding every face but the leading one by
   the width of the bite centres the text in the part you can actually see. */
.avatar-stack .avatar:not(:first-child) { padding-left: 7px; }
.avatar-stack .avatar:nth-child(1) { z-index: 6; }
.avatar-stack .avatar:nth-child(2) { z-index: 5; }
.avatar-stack .avatar:nth-child(3) { z-index: 4; }
.avatar-stack .avatar:nth-child(4) { z-index: 3; }
.avatar-stack .avatar:nth-child(5) { z-index: 2; }
.avatar-stack .avatar:nth-child(6) { z-index: 1; }

.avatar--more { background: var(--surface-sunken); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.proj-progress { display: grid; gap: var(--space-2); }

.proj-progress__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.proj-progress__value { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* The shared .meter fill is a chart colour, which is right when it means a
   series and wrong here: this bar measures one thing, so it takes the accent.
   Time-used sits behind it as background information, in neutral ink. */
.proj-progress .meter__fill { background: var(--accent); }
.proj-progress .meter--time .meter__fill { background: var(--text-faint); }

.proj-behind {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.proj-behind svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Planning strip and team
   -------------------------------------------------------------------------- */

.proj-planning {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.proj-fact { display: grid; gap: var(--space-1); }

.proj-fact__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.proj-fact__value { font-size: var(--text-md); font-weight: 500; }

.proj-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }

.proj-member {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.proj-member:hover { background: var(--surface-hover); }
.proj-member__text { min-width: 0; flex: 1; line-height: var(--leading-snug); }
.proj-member__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
.proj-member:hover .proj-member__actions,
.proj-member__actions:focus-within { opacity: 1; }

@media (hover: none) { .proj-member__actions { opacity: 1; } }

/* --------------------------------------------------------------------------
   The board
   -------------------------------------------------------------------------- */

/* Vijf kolommen in plaats van drie. Bij vijf is "verdeel de breedte" geen
   goed antwoord meer op een gewoon scherm, dus ze krijgen een minimum en het
   bord schuift opzij zodra dat niet past — hetzelfde als elk ander bord. */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: var(--space-3);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}

.board__col { scroll-snap-align: start; }

.board__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}

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

.board__title {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.board__count {
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.board__drop {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-height: 120px;
  padding: var(--space-3);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: background var(--duration-fast) var(--ease);
}

.board__drop--over { background: var(--accent-soft); }
.board__empty { padding: var(--space-4) var(--space-2); font-size: var(--text-sm); color: var(--text-faint); text-align: center; }

/* --------------------------------------------------------------------------
   A card
   -------------------------------------------------------------------------- */

.task {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

.task__top { display: flex; align-items: flex-start; gap: var(--space-2); }
.task__title { flex: 1; font-size: var(--text-sm); line-height: var(--leading-snug); }

/* Yours: a grab cursor, a handle, and a rail down the side. Three signals,
   because "you can move this one" has to survive being glanced at. */
.task--mine {
  border-left: 3px solid var(--accent);
  cursor: grab;
}

.task--mine:active { cursor: grabbing; }
.task__grip { color: var(--text-faint); flex-shrink: 0; }
.task__grip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.task--mine:hover .task__grip { color: var(--text-secondary); }

.task--dragging { opacity: 0.4; }

/* Kept quiet until the card is under the pointer or has focus in it, because
   a board is a wall of cards and a button on every one of them reads as noise.
   It is always in the tab order, though — hiding it from the keyboard would
   make it a mouse-only feature. */
.task__share {
  flex-shrink: 0;
  opacity: 0;
  color: var(--text-muted);
  transition: opacity 120ms var(--ease);
  -webkit-user-drag: none;
}

.task:hover .task__share,
.task:focus-within .task__share,
.task__share:focus-visible { opacity: 1; }

/* Coarse pointers get no hover, so there it simply stays. */
@media (hover: none) {
  .task__share { opacity: 1; }
}

/* Arrived here from a card in a conversation. */
.task--found {
  border-color: var(--accent);
  box-shadow: var(--focus-ring), var(--shadow-md);
  animation: task-found 2s var(--ease);
}

@keyframes task-found {
  0%, 60% { background: var(--accent-soft); }
  100% { background: var(--surface-raised); }
}

@media (prefers-reduced-motion: reduce) {
  .task--found { animation: none; }
}

/* Picked up with the keyboard: the same "in the air" state a dragged card has,
   said with a ring since there is no pointer to follow. */
.task--carried {
  box-shadow: var(--focus-ring), var(--shadow-md);
  border-color: var(--border-focus);
}

.task--placeholder {
  min-height: 62px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

.task__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.task__who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.task__who span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.task__due { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.task__due--soon { color: var(--warning-ink); font-weight: 600; }
.task__due--late { color: var(--critical-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Responsive — the board scrolls sideways rather than squeezing to nothing
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .board { grid-auto-columns: minmax(230px, 1fr); }
  .proj-team { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   The Taken page — your cards from every project, grouped by urgency
   ========================================================================== */

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

.tasks-head__title {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tasks-head__title--critical { color: var(--critical-ink); }
.tasks-head__title--warning  { color: var(--warning-ink); }
.tasks-head__title--good     { color: var(--good-ink); }

.tasks-head__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-size: var(--text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tasks-note { padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-muted); }


/* The board card's title is a link now; it must not look like one until you
   reach for it, or every card turns blue. */
a.task__title { color: inherit; text-decoration: none; }
a.task__title:hover { color: var(--text-link); text-decoration: underline; }
a.task__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }


/* ==========================================================================
   De projectenpagina — het overzicht

   Vier tegels, een balk, en dan kaarten of een lijst. Alles hieronder heet
   `.pr-*`, zodat het losstaat van `.proj-*` dat over één project gaat.

   Kleur: een project draagt een van de zes paren uit tokens.css. Die worden
   per kaart als drie eigen eigenschappen gezet (`--pr-tint`, `--pr-ink`,
   `--pr-bar`), zodat de stylesheet niet zes keer hetzelfde hoeft te zeggen en
   er nergens een hexcode buiten tokens.css staat.
   ========================================================================== */

.pr { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- de rij snelkoppelingen --------------------------------------------- */

.pr-jump {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Dit is de <h1> van de pagina. Hij ziet eruit als een chip en niet als een
   kop, want de pagina zegt al in het kruimelpad en in de zijbalk waar je bent —
   maar hij is er wel, want een voorleesser heeft iets nodig om aan te kondigen. */
.pr-jump__here {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pr-jump__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--leaf-300);
}

.pr-jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  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;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pr-jump__link:hover { border-color: var(--accent); color: var(--text-primary); }
.pr-jump__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-jump__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- de vier tegels ------------------------------------------------------ */

.pr-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.pr-tile {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.pr-tile--critical { background: var(--critical-bg); border-color: var(--critical-line); }

.pr-tile__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.pr-tile__line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.pr-tile__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pr-tile--critical .pr-tile__value { color: var(--critical-ink); }
.pr-tile--good .pr-tile__value { color: var(--good-ink); }

.pr-tile__unit { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- de balk ------------------------------------------------------------- */

.pr-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

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

.pr-chip {
  height: 34px;
  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;
  white-space: nowrap;
  cursor: pointer;
}
.pr-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pr-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-chip--on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-ink);
}

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

.pr-mode {
  height: 28px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
/* Alleen de knop die NIET aanstaat reageert op hover. De actieve draagt een
   donkere vulling, en `color: var(--text-primary)` erbovenop maakte daar
   donkere letters op een donker vlak van — 1,1:1, oftewel weg. Gemeten, niet
   gezien. */
.pr-mode:not(.pr-mode--on):hover { color: var(--text-primary); }
.pr-mode:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-mode--on { background: var(--surface-inverse); color: var(--text-inverse); }

.pr-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.pr-sort:hover { background: var(--surface-active); }
.pr-sort:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pr-sort__word {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pr-sort__value { font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); }
.pr-sort__icon {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-bar__right {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.pr-shown {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pr-search {
  flex: 1;
  max-width: 280px;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.pr-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.pr-search__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.pr-search__input::-webkit-search-cancel-button { display: none; }

.pr-search__clear {
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}
.pr-search__clear:hover { color: var(--critical-ink); }
.pr-search__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pr-new { flex: none; white-space: nowrap; }

/* ---- de maakregel (adminblok) -------------------------------------------- */

.pr-compose {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.pr-compose__box {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 3px;
  border: 1.5px dashed var(--border-strong);
}

.pr-compose__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}

.pr-compose__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.pr-compose__lead:hover { border-color: var(--accent); }

.pr-compose__esc {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}

/* ---- niets gevonden ------------------------------------------------------ */

.pr-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.pr-none__mascot { width: 108px; height: auto; }
.pr-none__title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); }
.pr-none__body { font-size: var(--text-sm); color: var(--text-muted); }
.pr-none .btn { margin-top: var(--space-2); }

/* ==========================================================================
   De kaarten
   ========================================================================== */

.pr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(392px, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.pr-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  /* --duration-fast, niet --motion-fast: die laatste bestaat niet, dus de hele
     regel was ongeldig en de kaart vervaagde nergens naartoe. Gemeten. */
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  cursor: pointer;
}
/* De rand draagt de stand. Zacht genoeg om de pagina niet te laten schreeuwen,
   sterk genoeg om een kaart die aandacht vraagt eruit te pikken zonder te
   lezen. */
.pr-card--serious { border-color: var(--serious-line); }
.pr-card--warning { border-color: var(--warning-line); }
.pr-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
/* De kaart licht op zodra iets erbinnen focus heeft: die focus zit op een link
   IN de kaart en niet op de kaart zelf. */
.pr-card:focus-within { border-color: var(--accent); }

.pr-card__top { display: flex; align-items: flex-start; gap: var(--space-3); }

.pr-card__tile {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--pr-tint, var(--surface-sunken));
  color: var(--pr-ink, var(--text-secondary));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pr-card__tile--sm { width: 26px; height: 26px; border-radius: var(--radius-sm); }

.pr-card__titles { flex: 1; min-width: 0; }

.pr-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* De naam is de link naar het project. Hij ziet er niet uit als een link tot je
   ernaar reikt, anders wordt een pagina vol kaarten een pagina vol blauw. */
.pr-card__link {
  color: var(--text-primary);
  text-decoration: none;
}
.pr-card:hover .pr-card__link { color: var(--text-link); }
.pr-card__link:hover { text-decoration: underline; }
.pr-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.pr-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  min-width: 0;
}

.pr-card__who {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-card__goal {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  /* Een vaste ondergrens houdt de drie blokken eronder op één lijn, ook als de
     ene samenvatting twee regels is en de andere één. */
  min-height: 2.9em;
}

.pr-card__none {
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---- gezondheid ---------------------------------------------------------- */

.pr-health {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pr-health__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pr-health--good    { background: var(--good-bg);    color: var(--good-ink); }
.pr-health--warning { background: var(--warning-bg); color: var(--warning-ink); }
.pr-health--serious { background: var(--serious-bg); color: var(--serious-ink); }

/* ---- het drieluik -------------------------------------------------------- */

.pr-figures {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  overflow: hidden;
}

/* minmax(0, 1fr) en niet 1fr: een grid-track is standaard minstens zo breed als
   zijn inhoud, dus drie kolommen met cijfers erin weigeren te krimpen en duwen
   de hele kaart — en daarmee de pagina — buiten een telefoonscherm. */
.pr-figures__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pr-figure {
  padding: var(--space-3);
  border-right: 1px solid var(--border-subtle);
}
.pr-figure:last-child { border-right: 0; }

.pr-figure__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.pr-figure__value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pr-figure__value--good     { color: var(--good-ink); }
.pr-figure__value--critical { color: var(--critical-ink); }
/* Een nul is een antwoord en geen decoratie: gedempt genoeg om niet te
   schreeuwen, leesbaar genoeg om te tellen. --text-faint kwam op 3,1:1 uit en
   dat is geen getal dat je met een schuine blik nog leest. */
.pr-figure__value--quiet    { color: var(--text-muted); }

.pr-figures__meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.pr-meter { flex: 1; height: 6px; }
.pr-meter__fill { background: var(--pr-bar, var(--accent)); }

.pr-figures__pct {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---- de voet ------------------------------------------------------------- */

.pr-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.pr-next {
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pr-next--critical { color: var(--critical-ink); }
.pr-next--warning  { color: var(--warning-ink); }
.pr-next--normal   { color: var(--text-secondary); }
.pr-next--none     { color: var(--text-faint); }

.pr-fold {
  flex: none;
  margin-left: auto;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
}
.pr-fold:hover { border-color: var(--accent); background: var(--surface-hover); }
.pr-fold:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pr-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.pr-card:hover .pr-open { background: var(--accent-hover); }
.pr-open:hover { background: var(--accent-active); }
.pr-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-open__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- de taken onder een kaart -------------------------------------------- */

.pr-tasks {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.pr-check {
  width: 17px;
  height: 17px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  padding: 0;
}
.pr-check::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.pr-check--on { background: var(--accent); border-color: var(--accent); }
.pr-check--on::after { opacity: 1; }
.pr-check:disabled { cursor: not-allowed; opacity: 0.55; }
.pr-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pr-task__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;
}
.pr-task__title:hover { color: var(--text-link); text-decoration: underline; }
.pr-task__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Doorgehaald én gedempt, maar niet zó gedempt dat het onleesbaar wordt:
   --text-faint is voor streepjes en scheidingen, niet voor tekst die iemand
   nog moet kunnen lezen om te zien wát er af is. */
.pr-task--done .pr-task__title { text-decoration: line-through; color: var(--text-muted); }

.pr-task__due {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pr-task__due--critical { color: var(--critical-ink); }
.pr-task__due--warning  { color: var(--warning-ink); }
.pr-task__due--quiet    { color: var(--text-muted); }

/* ==========================================================================
   De lijst
   ========================================================================== */

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

.pr-list__head,
.pr-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 140px 64px 64px 64px 170px 128px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.pr-list__head {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.pr-list__th {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pr-list__th--sort { cursor: pointer; }
.pr-list__th--sort:hover { color: var(--text-primary); }
.pr-list__th--sort:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.pr-list__th--on { color: var(--accent-soft-ink); }
.pr-list__arrow { font-size: 9px; }

.pr-list__th.pr-col--n { justify-content: flex-end; }
.pr-list__th.pr-col--next { justify-content: flex-end; }

.pr-row {
  border-bottom: 1px solid var(--border-subtle);
  color: inherit;
  text-decoration: none;
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: var(--surface-hover); }
.pr-row:focus-visible {
  outline: none;
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.pr-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pr-col--n { justify-content: flex-end; }
.pr-col--next { justify-content: flex-end; }

.pr-row__names { min-width: 0; display: flex; flex-direction: column; }

.pr-row__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-row__who {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-row__pct {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.pr-row__go {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-col--prog .pr-meter { flex: 1; }

/* ==========================================================================
   Smallere schermen
   ========================================================================== */

@media (max-width: 1100px) {
  .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* `width: 100%` is hier niets waard: de basisregel zet `flex: 1`, en dat
     overschrijft de breedte op de hoofdas. De rij bleef daardoor naast de
     sorteerknop staan en duwde het zoekveld het scherm uit. Met `flex-basis`
     op 100% pakt hij een eigen regel, wat de bedoeling was. */
  .pr-bar__right { flex: 1 0 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
  .pr-search { max-width: none; }

  /* De lijst verliest de drie tellingen en de balk: op deze breedte is dat
     zeven kolommen in vierhonderd pixels, en dan leest niets meer. Wat
     overblijft is waar het om gaat — welk project, hoe het ervoor staat, en
     wat er als eerste aan de beurt is. */
  .pr-list__head,
  .pr-row { grid-template-columns: minmax(0, 1fr) 120px 104px; }
  .pr-list__th.pr-col--n,
  .pr-cell.pr-col--n,
  .pr-list__th.pr-col--prog,
  .pr-cell.pr-col--prog { display: none; }
}

@media (max-width: 560px) {
  .pr-tiles { grid-template-columns: minmax(0, 1fr); }
  .pr-card__foot { align-items: stretch; }
  .pr-fold { margin-left: 0; }
  .pr-list__head,
  .pr-row { grid-template-columns: minmax(0, 1fr) 104px; }
  .pr-list__th.pr-col--health,
  .pr-cell.pr-col--health { display: none; }
}


/* ==========================================================================
   De pagina van één project

   Een balk om weg te springen, een kopkaart, en dan twee kolommen: links het
   werk, rechts wie eraan zit en wat eruit kwam. Alles heet `.pd-*`.
   ========================================================================== */

.pd { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- de balk bovenaan ---------------------------------------------------- */

.pd-jump {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pd-jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  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;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pd-jump__link:hover { border-color: var(--accent); color: var(--text-primary); }
.pd-jump__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pd-jump__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-jump__count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* De wisselaar. Codes en geen namen: op deze breedte passen vijf namen niet,
   en de code is waar mensen een project aan herkennen — hij staat ook op elke
   taak. De naam staat in de tooltip. */
.pd-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.pd-switch__one {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.pd-switch__one:hover { background: var(--surface-hover); color: var(--text-primary); }
.pd-switch__one:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-switch__one--on { background: var(--surface-inverse); color: var(--text-inverse); }

.pd-switch__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }

.pd-jump__save {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.pd-jump__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-good); }

/* ---- de kopkaart --------------------------------------------------------- */

.pd-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.pd-head__left { flex: 1; min-width: 0; }

.pd-head__line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pd-head__tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--pr-tint, var(--surface-sunken));
  color: var(--pr-ink, var(--text-secondary));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pd-head__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

.pd-head__goal {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 74ch;
}

.pd-head__facts {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.pd-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.pd-fact strong { color: var(--text-primary); font-weight: 600; }
.pd-fact__label::after { content: " ·"; }
.pd-fact__who { display: inline-flex; align-items: center; gap: var(--space-2); }

/* De deadline is voorbij en er staat nog werk open. Het staat op de looptijd
   zelf in plaats van op een eigen pil: het is één ding, geen twee. */
.pd-fact--late strong { color: var(--critical-ink); }
.pd-fact__note {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--critical-bg);
  color: var(--critical-ink);
  font-size: var(--text-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.pd-head__right {
  flex: none;
  width: 208px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pd-head__pct { display: flex; align-items: baseline; gap: var(--space-2); }

.pd-head__pct-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pd-head__pct-word { font-size: var(--text-xs); color: var(--text-muted); }

.pd-meter { height: 8px; }
.pd-meter__fill { background: var(--pr-bar, var(--accent)); }

.pd-trio { display: flex; align-items: baseline; gap: var(--space-4); }
.pd-trio__one { display: inline-flex; align-items: baseline; gap: 5px; }

.pd-trio__n {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pd-trio__n--good { color: var(--good-ink); }
.pd-trio__n--critical { color: var(--critical-ink); }
.pd-trio__n--quiet { color: var(--text-muted); }
.pd-trio__label { font-size: var(--text-xs); color: var(--text-muted); }

.pd-head__acts {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- de twee kolommen ---------------------------------------------------- */

.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
}

.pd-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pd-rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- het werk ------------------------------------------------------------ */

.pd-tasks__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.pd-tasks__count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pd-tasks__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pd-list { border-top: 1px solid var(--border-subtle); }

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

.pd-group__name { font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); }

.pd-group__count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.pd-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.pd-task:hover { background: var(--surface-hover); }

.pd-task__title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-task__title:hover { color: var(--text-link); text-decoration: underline; }
.pd-task__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.pd-task--done .pd-task__title { text-decoration: line-through; color: var(--text-muted); }

.pd-task__steps {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.pd-task__due {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pd-task__due--critical { color: var(--critical-ink); }
.pd-task__due--warning  { color: var(--warning-ink); }
.pd-task__due--quiet    { color: var(--text-muted); }

.pd-list__empty { padding: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

.pd-add {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.pd-add:hover { color: var(--accent); background: var(--surface-hover); }
.pd-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pd-compose {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-soft);
}

.pd-compose__box {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-strong);
}

.pd-compose__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.pd-compose__esc {
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}

/* ---- de panelen in de rechterkolom --------------------------------------- */

.pd-panel {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.pd-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pd-panel__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.pd-panel__add {
  margin-left: auto;
  height: 26px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--accent-soft-ink);
  cursor: pointer;
}
.pd-panel__add:hover { border-color: var(--accent); }
.pd-panel__add:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.pd-panel__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-link);
}

/* het team */

.pd-people { display: flex; flex-direction: column; gap: var(--space-3); }

.pd-person { display: flex; align-items: center; gap: var(--space-3); }

.pd-person__text { flex: 1; min-width: 0; }

.pd-person__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-person__role {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-person__load {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pd-person__load--none { color: var(--text-muted); }

/* De twee knoppen verschijnen als je de regel aanwijst — of er focus in zit,
   want anders bestaan ze niet voor wie tabt. */
.pd-person__acts { flex: none; display: flex; gap: 2px; opacity: 0; }
.pd-person:hover .pd-person__acts,
.pd-person:focus-within .pd-person__acts { opacity: 1; }

/* de documenten */

.pd-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-md);
}
.pd-files--over { outline: 2px dashed var(--accent); outline-offset: 4px; }

.pd-files__empty {
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Een div en geen link: er zit een knop in, en een knop binnen een <a> is
   ongeldig. De naam is de link; de rest van de regel brengt je er ook heen. */
.pd-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
}
.pd-file:hover { border-color: var(--accent); background: var(--surface-hover); }
.pd-file:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.pd-file__kind {
  flex: none;
  width: 38px;
  padding: 3px 0;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.pd-file__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-file__name:hover { text-decoration: underline; }
.pd-file__name:focus-visible { outline: none; text-decoration: underline; }

.pd-file__size {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.pd-file__drop {
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}
.pd-file__drop:hover { color: var(--critical-ink); }
.pd-file__drop:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* de activiteit */

.pd-feed { display: flex; flex-direction: column; gap: var(--space-3); }

.pd-feed__row { display: flex; gap: var(--space-3); }

.pd-feed__text { min-width: 0; }

.pd-feed__line {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}
.pd-feed__line strong { color: var(--text-primary); font-weight: 700; }

.pd-feed__where {
  display: block;
  margin-top: 1px;
  font-size: var(--text-2xs);
  color: var(--text-link);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-feed__where:hover { text-decoration: underline; }
.pd-feed__where:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.pd-feed__when {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* een project dat er niet is */

.pd-gone__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
}

/* ---- smallere schermen --------------------------------------------------- */

@media (max-width: 1180px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  /* De rail wordt onderaan drie panelen naast elkaar in plaats van drie
     onder elkaar — anders staat de activiteit een scherm lager dan het werk. */
  .pd-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 900px) {
  .pd-head { flex-direction: column; gap: var(--space-4); }
  .pd-head__right { width: 100%; }
  .pd-person__acts { opacity: 1; }
}

@media (max-width: 560px) {
  .pd-rail { grid-template-columns: minmax(0, 1fr); }
  .pd-head__facts { gap: var(--space-3); }
  .pd-tasks__tools { margin-left: 0; width: 100%; }
}

/* Het bord binnen de takenkaart. Geen tweede schuifbak eromheen: `.board`
   schuift al zijwaarts uit zichzelf, en twee bakken over elkaar leveren een
   kolom op die half onder een rand verdwijnt zonder dat er iets beweegt. */
.pd-board { padding: var(--space-4); }