/**
 * documents — the document bank intake queue.
 *
 * The screen's one job is to make a wrong date hard to enter and an unanswered
 * document hard to forget. Everything below serves one of those two.
 */

#view-documents .dc-mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Never asked is our failure, not the contractor's, so it is the row that gets the
   mark. Asked three times is a different problem and needs a different person. */
#view-documents tr.dc-never > td:first-child { border-left: 3px solid var(--mark-ink); }
#view-documents .dc-asked {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-secondary);
}
#view-documents tr.dc-never .dc-asked { color: var(--mark-ink); }

/* The filing form is where a wrong expiry date enters the system, so it is set as a
   ruled sheet with every field labelled rather than a row of placeholders. */
#view-documents #intake-file {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sm) var(--md);
  align-items: end;
}
#view-documents #intake-file label {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  min-width: 0;
}
#view-documents #intake-file input,
#view-documents #intake-file select {
  font-family: var(--display);
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  width: 100%;
}
#view-documents #intake-file button { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 40rem) {
  #view-documents #intake-file { grid-template-columns: 1fr; }
  #view-documents .dc-mono { white-space: normal; }
}