/* The reading list at /train/sources. Loaded after prose.css, which does the
 * headings, the measure and the paragraphs; this file is only the row.
 *
 * A source row is a name and two facts about it, and the two facts are the
 * same two on every row, so they sit in a column of their own rather than
 * trailing the name in parentheses. That column is the whole design: it makes
 * the weights scannable down the page, which is the one thing a reading list
 * sorted by weight is for.
 *
 * No bullets, no borders, no fill. prose.css puts a marker on .prose li, and
 * these rows are a table in all but name, so it is turned off here.
 */

.prose .srclist { margin: 0 0 20px; }

.prose .srclist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: 0;
  margin-bottom: 7px;
  line-height: 1.55;
}

/* prose.css draws a marker with ::before on every list item. */
.prose .srclist li::before { content: none; }

.prose .srclist li a {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-dim);
  text-decoration: none;
}

.prose .srclist li a:hover { border-bottom-color: var(--line); }

.prose .srclist .meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The question count is the number the eye should catch on the way down. */
.prose .srclist .meta b {
  display: inline-block;
  min-width: 2.2em;
  text-align: right;
  color: var(--line);
  font-weight: 600;
}

/* A group standfirst, sitting under its heading. Dimmer than body text so the
   heading and the list read as the structure and this reads as an aside. */
.prose .note {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: -4px 0 14px;
}

/* At phone width the name and its numbers stop competing for one line. */
@media (max-width: 520px) {
  .prose .srclist li { flex-wrap: wrap; gap: 2px 12px; }
  .prose .srclist li a { flex: 1 1 100%; }
  .prose .srclist .meta b { min-width: 0; text-align: left; }
}