/* Console. One card per account, so an operator reading down the page never
   has to hold a table header in mind to know which column they are in. */

.console-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }

.console-list__item {
  padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
}

.console-list__head {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 0.5rem;
}

.console-list__email { font-weight: 600; }

/* The last row of a card already sits on the card's own border. */
.console-list__item .facts__row:last-child { border-bottom: none; padding-bottom: 0; }

/* A proposal the publisher took and never finished. Marked with the border
   rather than a colour of its own: it is the same card, in a state that needs
   to be findable while scrolling. */
.console-list__item--stuck { border-color: var(--ink); }

.console-checked { margin-top: 1rem; font-size: 0.8125rem; color: var(--ink-faint); }

/* The manual publication worklist. Same card as above: an operator scrolling
   the console must not have to learn a second shape to read a second screen. */

.delivery__label {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-faint);
}

/* pre-wrap, because the approved text is the merchant's own paragraph breaks.
   Collapsing them would show the operator something other than what was
   validated, on the one screen whose whole job is to reproduce it exactly. */
.delivery__text {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.375rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.delivery__photo { margin: 0.75rem 0 0; font-size: 0.875rem; }

.delivery__form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end;
  margin-top: 0.75rem;
}

.delivery__field { display: grid; gap: 0.25rem; flex: 1 1 18rem; }
.delivery__field span { font-size: 0.8125rem; color: var(--ink-faint); }
.delivery__field input { width: 100%; }