/* probation.css - The probation desk and its section.

   The desk is four panes of rows, and a row is three things stacked: who,
   what is outstanding, and what you can do about it. The sentence sits
   between the name and the buttons rather than beside them, because it is
   the thing somebody reads before deciding which button to press.

   Panes stay stacked at every width. A probation desk is read down, one
   queue after another, and a two-column layout at desktop width puts Follow
   up beside Deciding, where it reads as an aside rather than as a queue. */

.probation-desk {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.probation-pane {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.probation-pane .pane-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.probation-pane .pane-title {
  margin: 0;
  font-family: var(--t-display);
  font-size: var(--t-sm);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
  color: var(--c-text-2);
}

.probation-pane .pane-blank {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

.probation-row {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

/* The phase as a stripe down the leading edge: the pane already says which
   queue this is, so the row only has to stay recognisable when somebody has
   scrolled past the heading. */
.probation-row[data-phase='missed']       { border-inline-start: 3px solid var(--c-danger); }
.probation-row[data-phase='not_placed']   { border-inline-start: 3px solid var(--c-warn); }
.probation-row[data-phase='active']       { border-inline-start: 3px solid var(--c-success); }

/* A tap target, not just a word. 16px of text is 16px of link, which the
   geometry audit fails at the 24px floor and a thumb misses on a phone. */
.probation-name {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  font-family: var(--t-display);
  font-weight: var(--t-semibold);
}

.probation-meta,
.probation-next {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--t-sm);
}

.probation-next { color: var(--c-text); }

.probation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.probation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* A disabled button carries its reason on `title`, so it has to stay
   readable rather than disappear: somebody has to be able to see that Pass
   exists and is not available yet. */
.probation-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}