/* --- What the clock has been doing (#605) --- */

/* One card per job, as wide as a card needs and no wider. `record__cards` was
   the alternative and is a two-column `columns` layout built for a record's
   sidebar; four jobs of unequal height in it break across the column boundary
   in the middle of a fact. */
.uhr-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
}

.uhr-job {
  min-width: 0;
}

/* `tunnelwacht:kontor-oerenburg` is one word to a browser and the head is a flex
   row, so without this the name pushes the badge off the card rather than
   wrapping under it. */
.uhr-job .record-card__eyebrow {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The badge and the streak are one sentence about where the job stands, so
   they sit on one line and wrap together. */
.uhr-job__state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.uhr-job__streak {
  font-size: 0.8rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The counters a run got through. Each is a figure and the word for what it
   counted, and the word is the quiet half: a reader scanning the column is
   looking for the number that is not what it usually is. */
.uhr__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
}

.uhr__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  white-space: nowrap;
}

.uhr__count-value {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--text);
}

.uhr__count-label {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* The run's own words, clamped to two lines and carried whole in the tooltip.
   A tunnel watch answers with the repair it attempted, which is four sentences
   and right, and a table where one row is five lines tall is a table nobody
   reads across. */
.uhr__said {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* An alert that was owed and did not go out. It does not change the run's own
   outcome — the run is already FEHLER for the fault it found — so it is
   coloured rather than badged (#499). */
.uhr__said--neg {
  color: var(--neg);
}