/* placement.css - Placing a candidate on probation.

   The placing dialog is an ordinary form dialog, so almost nothing is needed
   here. What IS needed is the one thing a plain select gets wrong: a role the
   caller may not use is present and disabled rather than missing, because a
   row that vanishes reads as a gap in the data instead of as a rule. A
   disabled option that looks exactly like an enabled one reads as a bug, so it
   is dimmed and its reason is on the option's own title.

   No colour literals: every value is a token from packages/design/tokens.css,
   so light and dark both follow without a second rule. */

.pl-roles select option:disabled {
  color: var(--c-text-2);
  font-style: italic;
}

/* The "Ready to place" rows, on the desk and on the funnel. A row that cannot
   be acted on keeps its place in the list and says why, rather than being
   filtered out of a list somebody is counting. */
.pl-ready {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pl-ready-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
}

.pl-ready-row:last-child { border-bottom: 0; }

.pl-ready-row[data-blocked='true'] { opacity: 0.72; }

.pl-ready-who {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.pl-ready-why {
  font-size: var(--t-sm);
  color: var(--c-text-2);
}

/* The gap a late placement is choosing not to score. It is a number somebody
   should read before they accept it, so it sits beside the action rather than
   in a tooltip. */
.pl-gap {
  font-size: var(--t-sm);
  color: var(--c-text-2);
}