/* ---------------------------------------------------------------------------
   offboarding.css - the offboarding desk and its section.

   One table, two answers per row: has the handover session been recorded, and
   is anything still handed over. They are separate columns because they are
   separate facts, and a reader who cannot tell them apart will call somebody
   offboarded who still has the mailbox.

   An overdue row carries a left edge rather than only a chip. A deadline that
   has gone by is the one thing this desk exists to surface, and a colour in a
   single cell is easy to skim past in a list of twenty.
   --------------------------------------------------------------------- */

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

.offb-note { margin: 0; font-size: var(--t-sm); color: var(--c-text-2); }

.offb-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.offb-table th {
  text-align: left; font-weight: var(--t-semibold); color: var(--c-text-2);
  padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--c-border);
  white-space: nowrap;
}
.offb-table td {
  padding: var(--s-3); border-bottom: var(--bw) solid var(--c-border);
  vertical-align: top;
}
.offb-table tr:last-child td { border-bottom: 0; }

.offb-table tbody tr[data-kt="overdue"] td:first-child {
  box-shadow: inset 2px 0 0 var(--c-danger);
}

/* The exit's track and how far it has got, on one line: the track is the work
   and the state is the timing, and they are read together. */
.offb-state { color: var(--c-text-2); white-space: nowrap; }

.offb-due { margin-left: var(--s-2); color: var(--c-text-2); white-space: nowrap; }
.offb-table tbody tr[data-kt="overdue"] .offb-due { color: var(--c-danger); }

.offb-evidence {
  display: inline-flex; align-items: center; gap: var(--s-1);
  margin-left: var(--s-2); white-space: nowrap;
}
.offb-evidence svg { width: 14px; height: 14px; }

/* A row somebody may not act on shows a lock, not a dead button: a control
   that can never work is noise, and the title carries the capability that
   would open it. */
.offb-locked { color: var(--c-text-2); display: inline-flex; align-items: center; min-height: 24px; }
.offb-locked svg { width: 14px; height: 14px; }

/* A LINK IN A TABLE CELL IS STILL A TOUCH TARGET. A name set in body text is
   under the 24px floor the geometry audit enforces. The cell is not made
   taller; the anchor is, around the same text. */
.offb-table td a { display: inline-flex; align-items: center; min-height: 24px; }

@media (max-width: 720px) {
  .offb { overflow-x: auto; }
  .offb-table { min-width: 640px; }
}