/* Renewals.
   ------------------------------------------------------------------
   Two pill colours and nothing else. The whole module is the existing
   list, table and card furniture; what it needed was a way to say
   "this one has already gone wrong" that reads across a room, on a
   phone, without anybody having to read the words. */

.pill.late { background: var(--bad-wash); color: var(--bad); }
.pill.soon { background: var(--warn-wash); color: var(--warn); }

/* A row whose date has passed carries the colour down its left edge as
   well as in the pill, because a pill in the fourth column of a table
   is not what the eye lands on first. On a phone the table collapses to
   stacked blocks and the stripe becomes the whole left side of the
   card, which is better still. */
.linetable tbody tr.rlate { box-shadow: inset 3px 0 0 var(--bad); }
.linetable tbody tr.rsoon { box-shadow: inset 3px 0 0 var(--warn); }

/* The name and the thing underneath it, in a table cell. `det` already
   exists as an inline detail; here it wants its own line. */
.linetable td .det {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}