:root {
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --gray: #f0efec;
  --green: #046b4d;   /* Forest's green: the site's primary colour */
  --red: #e34948;
  --card-w: 420px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

#map { position: fixed; inset: 0; z-index: 0; background: var(--surface); }
#map .leaflet-tile-pane { filter: opacity(.75); }
#map .leaflet-shadow-pane { pointer-events: none; opacity: .55; }
#map .leaflet-control-attribution { font-size: 10px; background: rgba(252, 252, 251, .8); }

/* Left column: title box (or its chip once scrolled), then the animation legend */
#side { position: fixed; top: 20px; left: 20px; z-index: 20; width: var(--card-w); max-width: calc(100vw - 40px); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#side > * { pointer-events: auto; }
#hero {
  background: rgba(252, 252, 251, .96); border-radius: 10px; padding: 22px 24px 18px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18); transition: opacity .5s ease, transform .5s ease;
}
#hero.away { opacity: 0; transform: translateY(-12px); pointer-events: none; }
#hero.gone { display: none; }
#hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
#hero .sub { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
#hero .frame { margin: 0 0 14px; font-size: 15px; }
#hero .hint { margin: 0; color: var(--ink-2); font-size: 14px; }
#hero .chev { display: inline-block; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

#chip {
  display: none; align-self: flex-start; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: rgba(252, 252, 251, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .15); opacity: 0; transition: opacity .4s ease;
}
#chip.on { display: block; opacity: 1; }

/* Animation legend: the simulated clock, bikes on the road, and the GPS / all-rides switch */
#legend {
  background: rgba(252, 252, 251, .96); border-radius: 10px; padding: 12px 16px 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18); transition: opacity .6s ease; font-size: 14px;
}
#legend.off { opacity: 0; pointer-events: none; }
#legend .clock { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
#scrub { display: block; width: 100%; height: 78px; margin: 0 0 8px; cursor: pointer; touch-action: none; border-radius: 4px; }
#scrub:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#legend #clock { font-size: 24px; font-weight: 600; }
#legend #live { color: var(--ink-2); font-size: 14px; }
#legend .switch { display: inline-flex; border: 1px solid var(--gray); border-radius: 6px; overflow: hidden; }
#legend .switch button {
  font: inherit; font-size: 13px; padding: 5px 11px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer;
}
#legend .switch button + button { border-left: 1px solid var(--gray); }
#legend .switch button.on { background: var(--green); color: var(--surface); }
#legend .note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* Story column: cards scroll over the map, on the right */
/* The column itself lets clicks through to the map; only the cards catch them */
#story { position: relative; z-index: 10; margin-left: auto; width: var(--card-w); max-width: calc(100vw - 40px); padding: 0 20px 0 0; pointer-events: none; }
.card { pointer-events: auto; }
.spacer { height: 100vh; height: 100svh; }
.card {
  background: rgba(252, 252, 251, .96); border-radius: 10px; padding: 20px 24px; margin: 0 0 60vh;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18); transition: opacity .3s ease;
}
.card:not(.active) { opacity: .55; }
.card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; }
.card p { margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.chart { position: relative; height: 200px; margin: 6px 0 14px; }
.card .note { color: var(--ink-2); font-size: 14px; }
.card a { color: var(--green); }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.swatch.red { background: var(--red); }
.swatch.green { background: var(--green); }
.info { margin-top: 10px; padding: 8px 12px; background: var(--gray); border-radius: 6px; font-size: 14px; }
.end { height: 30vh; }

/* Leaflet tooltips in the house style */
.leaflet-tooltip { font: 13px/1.4 system-ui, sans-serif; color: var(--ink); background: var(--surface); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

/* Phones: one column; the legend becomes a compact timeline bar pinned to the bottom of the
   screen (so the map shows between it and the title), the chip goes, and the map controls move
   to the top (app.js) where the legend cannot cover them */
@media (max-width: 900px) {
  :root { --card-w: 100%; }
  #side { top: 12px; left: 12px; right: 12px; width: auto; max-width: none; gap: 8px; }
  #hero { padding: 16px 18px 14px; }
  #hero h1 { font-size: 24px; }
  #hero .frame { display: none; }
  #chip { display: none !important; }
  #legend { position: fixed; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px 8px; background: var(--surface); }
  #legend .clock { gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
  #legend #clock { font-size: 20px; }
  #legend #live { font-size: 13px; }
  #scrub { height: 52px; margin: 2px 0 6px; }
  #legend .switch button { font-size: 12px; padding: 4px 9px; }
  #legend .switch .long { display: none; }
  #legend .note { display: none; }
  #legend.loading .note { display: block; margin-top: 6px; font-size: 12px; }
  #map .leaflet-control-attribution { max-width: calc(100vw - 64px); font-size: 9px; }
  #map .leaflet-top .leaflet-control { margin-top: 12px; }
  #story { width: auto; margin: 0 12px; padding: 0; }
  .end { height: 30vh; height: 30svh; }
  .card { margin-bottom: 50vh; padding: 16px 18px; }
  .chart { height: 170px; }
}

/* Landscape phones: two narrow columns again, so the title and legend don't cover the map */
@media (max-width: 900px) and (max-height: 500px) {
  #side { right: auto; width: 44vw; }
  #legend { right: auto; width: 44vw; }
  #hero { padding: 12px 14px 10px; }
  #hero h1 { font-size: 20px; margin-bottom: 4px; }
  #hero .sub { font-size: 13px; margin-bottom: 6px; }
  #hero .hint { font-size: 13px; }
  #story { width: 52vw; margin: 0 12px 0 auto; }
  .card { margin-bottom: 40vh; }
}

/* Touch screens: no double-tap zoom on the switch */
@media (pointer: coarse) {
  #legend .switch button { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  #hero .chev { animation: none; }
  #hero, .card, #chip, #legend { transition: none; }
}