/*
 * List view (/list.html)
 *
 * The plain index of the corpus: every published article as one row of
 * title plus publication date, grouped under year headings, newest first.
 * Build-time HTML — no script draws this page, so the rules here are the
 * whole of its presentation.
 *
 * Reached from the corpus-view switcher (.viz-switch in viz.css) shared
 * with Browse, Timeline and Map.
 */

.list-page-count {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    margin-top: var(--space-xs);
}

.list-year {
    margin-top: var(--space-lg);
}

.list-year-heading {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

.list-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.list-row:last-child {
    border-bottom: none;
}

.list-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 400;
}

.list-row-date {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

/* Narrow screens: the row stacks rather than squeezing the title, and the
   date sits above it. column-reverse keeps the DOM order (title first, so
   that is what a screen reader and the tab order meet first) while showing
   the date on top. */
@media (max-width: 600px) {
    .list-row {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.1rem;
    }
}