/* Bootstrap does the work; this is only what the quote list needs on top. */

/* The time slot reads as a label, not prose — line it up in a monospace column
   so the eye can run down it. */
.slot {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* The bold span is the whole point of a quote, so make it look like it will on
   the panel rather than like markup. */
.quote-text strong {
  font-weight: 700;
}

.quote-text {
  line-height: 1.45;
}

/* Coverage grid: 288 slots is a lot of cells, so they have to be small and
   still legible. */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
}

.coverage-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.coverage-cell:hover {
  outline: 2px solid var(--bs-primary);
}

/* Empty, thin, and stocked. Deliberately not a red/green pair: "thin" is a
   perfectly good state, not a warning. */
.coverage-0 { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.coverage-1 { background: rgba(var(--bs-primary-rgb), 0.25); }
.coverage-2 { background: rgba(var(--bs-primary-rgb), 0.5); }
.coverage-3 { background: rgba(var(--bs-primary-rgb), 0.85); color: #fff; }

.hour-label {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}