/* ---------------------------------------------------------------------------
   recognition.css - the dispatch desk and its section.

   The desk is a table with a checkbox per person and one button per kind,
   because the act it serves is "tick several names, press once". The result
   of a press stays ON THE PAGE as a list, above the table: a toast saying
   "3 skipped" scrolls away and does not say which three.
   --------------------------------------------------------------------- */

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

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

.rec-notes { display: flex; flex-direction: column; gap: var(--s-2); }

.rec-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rec-actions svg { width: 14px; height: 14px; }

.rec-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rec-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;
}
.rec-table td {
  padding: var(--s-3); border-bottom: var(--bw) solid var(--c-border);
  vertical-align: top;
}
.rec-table tr:last-child td { border-bottom: 0; }
.rec-table td:first-child { width: 28px; }

.rec-sub { font-size: var(--t-sm); color: var(--c-text-2); }
.rec-cell { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.rec-issued { color: var(--c-text-2); }
.rec-why { color: var(--c-text-2); }
.rec-none { color: var(--c-text-2); }

/* The result of one dispatch. Bordered rather than tinted, so a run with a
   skipped row reads as information and not as an error state. */
.rec-results:empty { display: none; }
.rec-result {
  border: var(--bw) solid var(--c-border-strong); border-radius: var(--r-md);
  padding: var(--s-4); margin-bottom: var(--s-4); background: var(--c-surface-2);
}
.rec-result[data-tone="bad"] { border-color: var(--c-danger); }
.rec-result-head { margin-bottom: var(--s-2); }
.rec-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rec-result-list li { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.rec-result-name { font-weight: var(--t-semibold); }
.rec-result-why { color: var(--c-text-2); font-size: var(--t-sm); }

@media (max-width: 720px) {
  .rec-body { overflow-x: auto; }
  .rec-table { min-width: 560px; }
}

/* A LINK IN A TABLE CELL IS STILL A TOUCH TARGET. A name set in body text is
   15px tall, which is under the 24px floor the geometry audit enforces and
   under what a thumb can hit on the phone this is also read on. The cell is
   not made taller: the anchor is, around the same text. */
.rec-table td a,
.docmail-table td a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}