/* Plain CSS only: no custom properties, no preprocessor, no framework, so the
   site works on old and budget devices where var() is unsupported. Colours are
   therefore written as literals and restated under the dark-mode media query
   rather than redefined as tokens. The token set is documented in the spec. */

* { box-sizing: border-box; }

html {
  background: #FFFFFF;
  color: #1C1C1C;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
}
body { margin: 0; font-size: 16px; line-height: 1.6; }

.site-header, main, .site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.site-header { padding-top: 24px; padding-bottom: 32px; }

.brand {
  display: inline-flex;
  align-items: center;
  color: #1C1C1C;
  text-decoration: none;
  font-weight: 600;
}
/* A margin, not flex `gap`: gap resolves to nothing on IE and on Safari before
   14.1, and the row would close up with no sign anything had failed. */
.brand svg { width: 48px; height: 32px; margin-right: 8px; }
.brand .carve { fill: #FFFFFF; }

h1 { font-size: 32px; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 24px; line-height: 1.3; margin: 48px 0 16px; }
h3 { font-size: 20px; line-height: 1.3; margin: 32px 0 8px; }
.lede { font-size: 20px; margin: 0 0 24px; }
.ja { color: #5C5C5C; margin: 0 0 24px; }

a { color: #165E83; }
code { overflow-wrap: anywhere; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid #165E83;
  outline-offset: 2px;
  border-radius: 4px;
}

.events { list-style: none; margin: 0; padding: 0; }
.events > li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px 16px;
  padding: 16px 0;
  border-top: 1px solid #E0E0E0;
}
.events > li:last-child { border-bottom: 1px solid #E0E0E0; }
.events time { font-weight: 600; font-variant-numeric: tabular-nums; }
.events .meta { margin: 4px 0 0; color: #5C5C5C; }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 8px;
  background: #FFF4D6;
  color: #5E4700;
  font-weight: 600;
}
.badge.cancelled { background: #FBE9E5; color: #8E2A1B; }

.note {
  padding: 16px;
  border-radius: 8px;
  background: #FFF4D6;
  color: #5E4700;
}
.note a { color: inherit; }
.note.cancelled { background: #FBE9E5; color: #8E2A1B; }

.facts {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px 24px;
  margin: 0 0 24px;
}
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

/* Three letters is a small tap target, so give the link height without moving the text. */
.map { display: inline-block; padding: 4px 0; }
.map svg { margin-right: 4px; vertical-align: -3px; }

.chip {
  display: inline-block;
  margin: 4px 8px 0 0;
  padding: 0 8px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
}

/* Decoration beside the word, never instead of it: the status is readable with no colour. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 8px;
  background: #165E83;
  vertical-align: 1px;
}
.dot.tentative { background: #5E4700; }
.dot.cancelled { background: #8E2A1B; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid #E0E0E0;
}
td { max-width: 320px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

details { margin-top: 48px; }
summary { cursor: pointer; font-weight: 600; }

.site-footer {
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 48px;
  border-top: 1px solid #E0E0E0;
  color: #5C5C5C;
}
.site-footer p { margin: 0 0 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Every strip on the site shares these: the route's days, an entry list's decades and
   the home page's years. Bars are positioned with percentages, not a grid or an SVG
   viewBox, so the labels stay real text at the base size on a phone. */
.chart { list-style: none; margin: 0 0 8px; padding: 0; }
.chart > li { margin: 0 0 16px; }
.chart-when { display: block; margin-bottom: 4px; }
.chart-track {
  display: block;
  position: relative;
  height: 8px;
  background: #E0E0E0;
  border-radius: 8px;
}
.chart-track i { position: absolute; top: 0; height: 8px; background: #165E83; border-radius: 8px; }
.chart-axis { margin: 0 0 24px; color: #5C5C5C; overflow: hidden; }
.chart-axis .end { float: right; }
/* Four evenly spaced labels, so a bar in August can be placed by eye. The spans must
   sit flush in the markup: whitespace between inline-blocks would wrap the last one. */
.chart-axis.quarters span { display: inline-block; width: 25%; }
/* The route and year strips end in an axis that carries the gap. The decade strip has no
   axis, so it supplies its own, or its last bar sits on the table header below. */
.chart.decades { margin-bottom: 24px; }
/* Cancelled: still shown, because the list below shows it, but plainly not a date to keep. */
.chart-track i.off { background: #5C5C5C; }

@media (max-width: 480px) {
  .events > li, .facts { grid-template-columns: 1fr; }
  .facts { gap: 4px; }
  .facts dd { margin-bottom: 16px; }
}

/* Dark mode restates only the colours. It comes last so these win on order. */
@media (prefers-color-scheme: dark) {
  html { background: #141414; color: #EBEBEB; }
  .brand { color: #EBEBEB; }
  .brand .carve { fill: #141414; }
  .ja { color: #A8A8A8; }
  a { color: #8CC4E0; }
  a:focus-visible, summary:focus-visible { outline-color: #8CC4E0; }
  .events > li { border-top-color: #333333; }
  .events > li:last-child { border-bottom-color: #333333; }
  .events .meta { color: #A8A8A8; }
  .badge { background: #3A300F; color: #F3D98B; }
  .badge.cancelled { background: #3A1C16; color: #F2A493; }
  .note { background: #3A300F; color: #F3D98B; }
  .note.cancelled { background: #3A1C16; color: #F2A493; }
  th, td { border-bottom-color: #333333; }
  .site-footer { border-top-color: #333333; color: #A8A8A8; }
  .chart-track { background: #333333; }
  .chart-track i { background: #8CC4E0; }
  .chart-axis { color: #A8A8A8; }
  .chart-track i.off { background: #A8A8A8; }
  .chip { border-color: #333333; }
  .dot { background: #8CC4E0; }
  .dot.tentative { background: #F3D98B; }
  .dot.cancelled { background: #F2A493; }
}