:root {
  --bg: #f3f5fa;
  --card: #fff;
  --text: #1c2333;
  --muted: #667085;
  --line: #e4e8f0;
  --accent: #3b5bdb;
  --accent-soft: #e8edff;
  --no-data: #b8b8b8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .05);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* header */
.hero { padding: .5rem .25rem 0; }
.brand { display: inline-flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.brand-dot { width: .9rem; height: .9rem; border-radius: 50%; background: linear-gradient(135deg, #12b886, #fab005 50%, #fa5252); }
h1 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .35rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.muted { color: var(--muted); font-size: .9rem; margin: 0; }
.status { margin: 0; padding: .75rem 1rem; border-radius: 10px; background: #fff4e6; color: #a04a00; border: 1px solid #ffd8a8; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; }
.map-card { padding: .5rem; display: flex; }

/* controls */
/* route rows: route + direction (half each) and the row buttons; then period, metric, day type (a third each) */
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1rem; align-items: end; }
.controls > .route-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 760px) { .controls > * { grid-column: 1 / -1; } }
.route-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8.3rem; gap: 1rem; align-items: end; }
/* only the first row shows the field names; the others keep them for screen readers */
.route-row + .route-row .row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.route-row.is-hidden select { color: var(--muted); background-color: #f8f9fc; }
.row-actions { display: flex; gap: .4rem; }
.row-button { flex: none; width: 2.5rem; height: 2.5rem; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; transition: border-color .15s, box-shadow .15s, color .15s; }
.row-button:hover:not(:disabled) { border-color: #c4cbdb; color: var(--text); }
.row-button:disabled { cursor: default; color: var(--no-data); background: #f8f9fc; }
.row-button:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row-button svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-add { color: var(--accent); }
.row-toggle[aria-pressed="true"] { background: #f3f4f7; }
@media (max-width: 760px) {
  /* route and the buttons on one line, the (longer) direction below them */
  .route-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .6rem; }
  .route-row > label:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .route-row .row-actions { grid-row: 1; grid-column: 2; }
  .route-row + .route-row { padding-top: .6rem; border-top: 1px solid var(--line); }
}
.controls label, .hour-card label, .field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.field-label { font: inherit; }
select, .range-button {
  width: 100%;
  height: 2.5rem;
  padding: 0 2.2rem 0 .8rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: #fff var(--chevron) no-repeat right .8rem center;
  border: 1px solid var(--line);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
select { text-overflow: ellipsis; }
option.main { font-weight: 700; }
select:hover, .range-button:hover:not(:disabled) { border-color: #c4cbdb; }
select:focus-visible, .range-button:focus-visible, .day:focus-visible, .chip:focus-visible, .nav:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* date range picker */
#range { position: relative; }
.range-button { display: flex; align-items: center; gap: .5rem; text-align: left; background-image: none; padding-right: .8rem; }
.range-button::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.range-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-button .caret { flex: none; width: 12px; height: 8px; background: var(--chevron) no-repeat center; }
.range-button:disabled { cursor: default; color: var(--muted); background-color: #f8f9fc; }
.range-popover {
  position: absolute; z-index: 1000; top: calc(100% + .5rem); left: 0; /* shifted by JS to stay in view */
  width: max-content; max-width: min(94vw, 640px);
  padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
  font-size: .9rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text);
}
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.hint { margin: 0; flex: 1; text-align: center; font-size: .85rem; color: var(--muted); }
.nav { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--text); }
.nav:hover:not(:disabled) { background: var(--bg); }
.nav:disabled { opacity: .35; cursor: default; }
.months { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.month { width: 15.75rem; }
.month-title { text-align: center; font-weight: 600; margin-bottom: .4rem; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.weekday { text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); padding: .2rem 0; }
.day, .day-empty { height: 2.25rem; }
.day { border: 0; background: transparent; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; border-radius: 8px; padding: 0; }
.day.has-data { font-weight: 600; }
.day.has-data:hover { background: var(--accent-soft); }
.day.no-data { background: #f1f2f5; color: #a3a9b6; cursor: not-allowed; border-radius: 8px; font-weight: 400; }
.grid .no-data { margin: 1px; height: calc(2.25rem - 2px); }
.day.in-range { background: var(--accent-soft); color: var(--accent); border-radius: 0; }
.day.range-start { background: var(--accent); color: #fff; border-radius: 8px 0 0 8px; }
.day.range-end { background: var(--accent); color: #fff; border-radius: 0 8px 8px 0; }
.day.range-start.range-end { border-radius: 8px; }
.day.pending { background: var(--accent); color: #fff; border-radius: 8px; }
.popover-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.range-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: .9rem; height: .9rem; border-radius: 4px; display: inline-block; }
.swatch.has-data { background: var(--accent-soft); border: 1px solid var(--accent); }
.swatch.no-data { background: #f1f2f5; border: 1px solid #dfe2e8; }
.presets { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; color: var(--text); }
.chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* hour picker with playback */
.hour-row { display: flex; gap: .5rem; align-items: center; }
.play { flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--accent); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.play:hover:not(:disabled) { border-color: #c4cbdb; }
.play:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.play:disabled { cursor: default; color: var(--no-data); }
.play svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.play .ring { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.play:not(.playing) .ring, .play .icon-pause, .play.playing .icon-play { display: none; }
.play.playing .icon-pause { display: inline; }

/* map + ranking */
main { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
.side { display: flex; flex-direction: column; gap: 1rem; }
#map { flex: 1; min-height: 540px; border-radius: 10px; z-index: 0; } /* grows with the side column */
/* direction of travel: one dash + gap (6 + 48 px) marches forward every 3 s */
.direction-flow { animation: direction-flow 3s linear infinite; }
@keyframes direction-flow { from { stroke-dashoffset: 54; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .direction-flow { animation: none; } }
.ranking { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; counter-reset: rank; }
.ranking li { counter-increment: rank; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem .55rem .5rem; border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; }
.ranking li.empty { display: block; border-style: dashed; }
.ranking .rank-label { flex: 1; min-width: 0; }
.ranking .rank-label::before { content: counter(rank); display: inline-block; width: 1.4rem; height: 1.4rem; margin-right: .5rem; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .75rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.rank-value { flex: none; min-width: 3.6rem; padding: .15rem .5rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .82rem; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.legend { font-size: .8rem; color: var(--muted); }
.legend-bar { display: block; height: .55rem; border-radius: 999px; background: linear-gradient(90deg, hsl(120, 75%, 45%), hsl(60, 75%, 45%), hsl(0, 75%, 45%)); }
.legend-labels { display: flex; justify-content: space-between; margin-top: .25rem; }
.legend-nodata { margin: .5rem 0 0; display: flex; align-items: center; gap: .4rem; }
.legend-nodata i { width: 1.1rem; height: .6rem; border-radius: 3px; background: var(--no-data); display: inline-block; }

/* heatmaps, one per route row */
.heatmaps { display: flex; flex-direction: column; gap: 1rem; }
.heatmaps:empty { display: none; }
.heatmap-route { font-weight: 500; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 2px; font-size: .75rem; }
th { font-weight: 600; color: var(--muted); }
th, td { padding: 4px 5px; text-align: center; white-space: nowrap; }
th.segment, td.segment { text-align: left; position: sticky; left: 0; z-index: 1; background: #fff; max-width: 320px; overflow: hidden; text-overflow: ellipsis; padding-right: .75rem; }
td.value { color: #fff; min-width: 40px; border-radius: 5px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
td.empty { background: #f3f4f7; color: #b5bac6; border-radius: 5px; }
/* hour headings pick the hour shown on the map and in the ranking; the selected one is filled */
th:has(> .hour-pick) { padding: 0; }
.hour-pick { width: 100%; padding: 4px 5px; border: 0; border-radius: 5px; background: none; font: inherit; color: inherit; cursor: pointer; transition: background .15s, color .15s; }
.hour-pick:hover { background: var(--accent-soft); color: var(--accent); }
.hour-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.hour-pick[aria-pressed="true"] { background: #f3f4f7; color: var(--text); } /* same grey as td.empty */

/* explanation of the selected metric */
.metric-explain h2 { margin-bottom: .75rem; }
.explain-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
@media (max-width: 760px) { .explain-parts { grid-template-columns: 1fr; } }
.explain-parts h3 { margin: 0 0 .15rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.explain-parts p { margin: 0; font-size: .9rem; white-space: pre-line; }

/* footer: data source, methodology and disclaimer */
.site-footer { background: #e9edf5; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 2.25rem 1.25rem 1.25rem; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr; } }
.site-footer h2 { margin: 0 0 .6rem; font-size: .9rem; color: var(--text); }
.site-footer h3 { margin: .7rem 0 .1rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer p { margin: 0; font-size: .82rem; }
.site-footer .footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #d9dfeb; font-size: .78rem; }
.footer-bottom strong { color: var(--text); }

/* Leaflet tooltips match the cards */
.leaflet-tooltip { border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); font: 600 .8rem Inter, system-ui, sans-serif; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #map { min-height: 380px; }
}

/* cookie consent bar for Google Analytics: refusing is as easy as accepting (same size, side by side) */
.consent { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgba(16, 24, 40, .1); padding: 1rem; }
.consent-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; }
.consent h2 { margin: 0 0 .35rem; font-size: 1rem; }
.consent p { margin: 0; font-size: .88rem; color: var(--muted); }
.consent-actions { flex: none; display: flex; gap: .6rem; width: 17rem; }
.consent-actions button { flex: 1; height: 2.5rem; font: inherit; font-size: .92rem; font-weight: 600; border-radius: 10px; cursor: pointer; }
.consent-reject { background: #fff; color: var(--text); border: 1px solid #c4cbdb; }
.consent-accept { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.consent-actions button:focus-visible, .link-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
@media (max-width: 760px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: .8rem; }
  .consent-actions { width: auto; }
}
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }