* { box-sizing: border-box }

body {
    margin: 0;
    background: #f7f3ea;
    color: #24221e;
    font: 17px/1.45 Georgia, serif;
}

main { max-width: 1080px; margin: auto; padding: 48px 24px 80px }

h1 { font-size: clamp(2.3rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 .35em }
a { color: #8f3522 }

.eyebrow { font: 700 12px/1.3 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase;
           color: #8f3522; margin: 0 0 14px }
.lede { max-width: 38em; margin: 0 0 1.4em }
.lede b { font-weight: normal }
.lede b:nth-of-type(1) { color: #5f8a68 }
.lede b:nth-of-type(2) { color: #a4832f }
.lede b:nth-of-type(3) { color: #a34b30 }
.meta { color: #625d54; font: 14px Arial, sans-serif }
.note { color: #625d54; font: 14px/1.5 Arial, sans-serif; max-width: 38em }

/* The standing caveat about where the numbers come from. Borrowed from the poe
   site's .missing: a rule in the margin rather than a coloured box, so it reads
   as a footnote that happens to come first. */
.warning { margin: 0 0 20px; padding: 10px 12px; background: #fff; border-left: 3px solid #8f3522;
           font: 14px/1.5 Arial, sans-serif; color: #4a453d; max-width: 44em }
.warning b { color: #24221e }

.panel { background: #fff; border: 1px solid #ded7cc; padding: 20px; margin: 20px 0 }

.row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 18px }
.row label { display: flex; flex-direction: column; gap: 5px; font: 11px Arial, sans-serif;
             text-transform: uppercase; letter-spacing: .04em; color: #625d54 }
select { padding: 7px; font: inherit; font-size: 15px; background: #fff;
         border: 1px solid #ded7cc; color: #24221e }

/* Nineteen hourly departures do not fit a phone, and squeezing them would cost
   the times their legibility. The grid scrolls inside the panel instead. */
.scroll { overflow-x: auto }

table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 13px }
th, td { padding: 0; border: 0 }
thead th { font-size: 11px; font-weight: normal; color: #625d54; text-align: center;
           padding: 0 0 7px; font-variant-numeric: tabular-nums }
thead th.day { text-align: left; padding-right: 14px }
tbody th { text-align: left; font-weight: normal; white-space: nowrap; padding: 0 14px 0 0;
           border-bottom: 1px solid #f2ece2 }
tbody th b { font-weight: 700; letter-spacing: .03em }
tbody th span { color: #a09786 }
/* Weekends are a different regime, not a quiet weekday; the row label says so
   without spending a colour that the cells need. */
tbody tr.weekend th { color: #a09786 }
tbody tr.weekend th b { font-weight: normal }

td { padding: 2px 2px 2px 0 }
td i { display: block; width: 100%; min-width: 30px; height: 24px; border-radius: 2px }
/* Muted rather than traffic-light: the page is read as a whole, and three
   saturated signals repeated four hundred times is a stadium scoreboard. */
.lv0 { background: repeating-linear-gradient(45deg, #f2ede4, #f2ede4 3px, #e8e1d5 3px, #e8e1d5 6px) }
.lv1 { background: #b9d2ba }
.lv2 { background: #ecd79b }
.lv3 { background: #cf9d90 }
/* No departure at this time on this day. Left blank -- an empty cell reads as
   "nothing ran", which is exactly right, and any fill would read as data. */
.gap { background: none }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0;
          font: 12px Arial, sans-serif; color: #625d54 }
.legend span { display: flex; align-items: center; gap: 7px }
.legend i { display: block; width: 22px; height: 12px; border-radius: 2px }

h2 { font-size: 1.5rem; letter-spacing: -.02em; margin: 44px 0 10px }

.status { margin: 0 0 14px; font: 14px Arial, sans-serif; color: #625d54 }
.status b { color: #24221e; font-weight: 700 }
.status.cold { color: #8f3522 }

/* A hundred rows is a log, not a table to read top to bottom: it scrolls in
   place so the page keeps its shape however long collection has been running. */
.tail { max-height: 420px; overflow-y: auto }
.tail table { font-size: 13px }
.tail th, .tail td { padding: 5px 10px 5px 0; white-space: nowrap }
.tail thead th { position: sticky; top: 0; background: #fff; text-align: left;
                 padding-top: 0; box-shadow: inset 0 -1px 0 #e4ddd1 }
.tail tbody td { border-bottom: 1px solid #f7f3ea }
.tail td.time { font-variant-numeric: tabular-nums; color: #625d54 }
.tail td.train { font-weight: 700 }
.tail td.late { color: #8f3522; font-variant-numeric: tabular-nums }
.tail td.early { color: #625d54; font-variant-numeric: tabular-nums }
/* The same three colours as the grid, as a dot rather than a block: a row is
   read across, and a filled cell here would fight the row for attention. */
/* min-width comes from the grid's `td i`, where cells stretch to fill a
   column; here it would flatten the dot into an oval. */
.tail td.occ i { display: inline-block; width: 9px; min-width: 9px; height: 9px;
                 border-radius: 50%; margin-right: 7px; vertical-align: 0 }
.tail td.occ i.lv0 { background: #ded7cc }
.tail td.occ i.lv1 { background: #6f9c78 }
.tail td.occ i.lv2 { background: #d8bd72 }
.tail td.occ i.lv3 { background: #bd7d6c }

footer { margin-top: 40px; border-top: 1px solid #e4ddd1; padding-top: 14px }
footer .meta { font-size: 12px }
#generated { color: #a09786 }

@media (max-width: 620px) {
    main { padding: 32px 16px 60px }
    .panel { padding: 14px }
}