/* Headlines of 1918: the passages of a chosen week, and the weekly chart's bars as pickers. */
.weeks { display: grid; gap: var(--space-4); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-5); }
.weeks-note { font-size: .86rem; color: var(--muted); }
.week-panel { display: grid; gap: 10px; }
.week-panel h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--navy); margin: 0; }
.week-panel h4:focus { outline: none; }
.week-panel .sub { font-size: .86rem; color: var(--muted); }
.week-hits { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.chart svg .col.pick { cursor: pointer; }
.chart svg .col.on .hit { fill: rgba(211,115,74,.14); }
.chart svg.papers text { font-size: 12px; }
/* one week at a time (story-flu.js): every panel in the same cell, the box as tall as the
   longest, the others invisible, so choosing a week never moves the page */
.week-stack { display: grid; gap: var(--space-4); }
.weeks:not(.one) .week-stack > .week-panel + .week-panel { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.weeks.one .week-stack > .week-panel { grid-area: 1 / 1; align-content: start; }
.weeks.one .week-panel.off { visibility: hidden; }
.week-nav .status { white-space: nowrap; }
@media (max-width: 560px) { .week-nav .status { flex-basis: 100%; margin-left: 0; } }