/* Fonts and tokens are the everystreet.run brand: Geist, and the
   "Stone + Forest" palette - warm stone neutrals with a deep forest accent. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --background: hsl(40 24% 96%);
  --card: hsl(40 40% 99%);
  --foreground: hsl(110 9% 13%);
  --muted: hsl(40 22% 92%);
  --muted-foreground: hsl(40 6% 40%);
  --border: hsl(40 24% 88%);
  --primary: hsl(146 36% 27%);
  --primary-foreground: hsl(40 40% 98%);
  --radius: 0.625rem;

  /* names the rest of the stylesheet already uses, mapped onto the brand */
  --navy: var(--foreground);
  --near-white: var(--background);
  --moon-gray: var(--border);
  --light-gray: var(--muted);
  --dark-gray: hsl(110 8% 28%);
  --mid-gray: var(--muted-foreground);
  --accent: var(--primary);
  --serif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-1: 0 1px 3px 0 rgba(28, 30, 26, 0.09);
  --shadow-2: 0 4px 14px -2px rgba(28, 30, 26, 0.14);
  --shadow-4: 0 1px 2px 0 rgba(28, 30, 26, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.logotype { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }

#map { position: absolute; inset: 0; }

/* ---- header, shared by the landing page ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  background: var(--near-white);
  border-bottom: 1px solid var(--moon-gray);
  box-shadow: var(--shadow-4);
}
.topbar .mark { display: block; width: 34px; height: 34px; }
.topbar .logotype { font-size: 34px; color: var(--navy); letter-spacing: -0.01em; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar a:hover { opacity: 0.7; }

/* ---- the round buttons that float over a map ---- */

.round {
  position: absolute;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: box-shadow 0.15s, transform 0.05s;
}
.round:hover { box-shadow: var(--shadow-2); }
.round:active { transform: translateY(1px); }
.round.home { top: 14px; left: 14px; }
.round.info { top: 14px; right: 14px; font-size: 17px; font-weight: 600; }

/* ---- the retracting info card ---- */

.info-card {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 33%;
  min-width: 300px;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 22px 26px 20px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  animation: slide-in 0.25s ease-out;
}
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }
.info-card h1 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.info-card p { margin: 0 0 12px; font-weight: 300; line-height: 1.55; }
.info-card .close {
  position: absolute; top: 10px; right: 14px;
  color: rgba(0, 0, 0, 0.5); cursor: pointer; font-size: 17px; line-height: 1;
}
.info-card .close:hover { color: var(--navy); }
.info-card details { margin-top: 4px; }
.info-card summary { cursor: pointer; user-select: none; outline: 0; color: var(--accent); }
.info-card details[open] summary { margin-bottom: 10px; }
.info-card .src { font-size: 13px; color: var(--mid-gray); margin-top: 14px; }
.info-card .src a { color: var(--mid-gray); }

/* ---- the controls panel ---- */

.panel {
  position: absolute;
  z-index: 3;
  top: 62px;
  left: 14px;
  width: 266px;
  max-height: calc(100% - 96px);
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  font-size: 14px;
}
.panel h2 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.panel section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--light-gray); }
.panel p { margin: 0 0 8px; color: var(--mid-gray); line-height: 1.5; font-size: 12.5px; font-weight: 300; }

label.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  user-select: none;
}
label.row input { accent-color: var(--navy); margin: 0; }
label.row .sw { width: 12px; height: 12px; border-radius: calc(var(--radius) - 4px); flex: none; border: 1px solid rgba(0, 0, 0, 0.18); }
label.row .n { margin-left: auto; color: var(--mid-gray); font-family: var(--mono); font-size: 11px; }

select, input[type="search"] {
  width: 100%;
  padding: 6px 8px;
  background: var(--card);
  color: var(--navy);
  border: 1px solid var(--moon-gray);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}
input[type="range"] { width: 100%; accent-color: var(--primary); }

button {
  padding: 6px 12px;
  background: var(--card);
  color: var(--navy);
  border: 1px solid var(--moon-gray);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
button:hover { background: var(--near-white); }
button.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.stat { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.stat b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.stat span { color: var(--mid-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big { font-family: var(--sans); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

.ramp { display: flex; height: 8px; border-radius: calc(var(--radius) - 4px); overflow: hidden; margin: 6px 0 4px; }
.ramp i { flex: 1; }
.ramp-labels { display: flex; justify-content: space-between; color: var(--mid-gray); font-size: 11px; font-family: var(--mono); }

/* Clickable year histogram: bar height is the count, so the control doubles as
   a distribution. Used by the vélo and cinéma maps. */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 52px; margin-top: 8px; }
.bars i { flex: 1; background: var(--muted); border-radius: 2px 2px 0 0; cursor: pointer; transition: background .15s; }
.bars i:hover { background: hsl(40 20% 84%); }
.bars i.on { background: var(--primary); }
.bars-x { display: flex; justify-content: space-between; color: var(--mid-gray); font-size: 10px; font-family: var(--mono); margin-top: 3px; }

.yearbars { display: flex; align-items: flex-end; gap: 5px; }
.yearbars .y { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; width: 42px; }
.yearbars .bar { width: 100%; min-height: 3px; background: var(--muted); border-radius: 2px 2px 0 0; transition: background .15s, height .25s; }
.yearbars .y:hover .bar { background: hsl(40 20% 84%); }
.yearbars .y.on .bar { background: var(--primary); }
.yearbars .lab { font-family: var(--mono); font-size: 10.5px; color: var(--mid-gray); line-height: 1; }
.yearbars .y.on .lab { color: var(--primary); font-weight: 700; }

.timeline {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.timeline .yr { font-family: var(--sans); font-weight: 600; font-size: 20px; min-width: 66px; }
.timeline input[type="range"] { width: 320px; }

.credit {
  position: absolute;
  bottom: 3px;
  left: 8px;
  z-index: 2;
  font-size: 11px;
  color: var(--mid-gray);
}

.loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--near-white);
  color: var(--mid-gray);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  transition: opacity 0.3s;
}
.loading.gone { opacity: 0; pointer-events: none; }

/* ---- popups ---- */

.maplibregl-popup-content {
  background: var(--card);
  color: var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 13px;
  max-width: 280px;
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { color: var(--mid-gray); font-size: 17px; padding: 2px 7px; }
.pop-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 1px; }
.pop-sub { color: var(--mid-gray); font-size: 12px; margin-bottom: 8px; }
.pop-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.pop-row span { color: var(--mid-gray); }
.pop-row b { font-family: var(--mono); font-weight: 500; }
.pop img { width: 100%; border-radius: calc(var(--radius) - 4px); margin: 8px 0 4px; display: block; }
.pop p { margin: 8px 0 0; color: var(--mid-gray); line-height: 1.45; font-size: 12px; font-weight: 300; }

@media (max-width: 700px) {
  .panel { width: calc(100% - 28px); max-height: 38%; top: 62px; }
  .info-card { width: calc(100% - 20px); max-width: none; min-width: 0; }
  .timeline { width: calc(100% - 28px); }
  .timeline input[type="range"] { width: auto; flex: 1; }
}

/* ---- MapLibre controls, on brand ----
   The corner container stacks children in DOM order, which puts the
   attribution above the zoom buttons. Explicit flex order pins the zoom on
   top regardless of the order the controls were added in. */

.maplibregl-ctrl-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 0 10px 10px 0;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { order: 1; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { order: 2; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; float: none; }

.maplibregl-ctrl-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background 0.12s;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.maplibregl-ctrl-group button:hover { background: var(--muted); }
.maplibregl-ctrl-group button:active { background: hsl(40 20% 86%); }
.maplibregl-ctrl-group button:focus,
.maplibregl-ctrl-group button:focus:not(:focus-visible) { box-shadow: none; }
.maplibregl-ctrl-group button:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.maplibregl-ctrl-group button:disabled { opacity: 0.35; }

/* Stock icons are a dark slate PNG sprite; swap in strokes in the brand ink. */
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.25v9.5M5.25 10h9.5' fill='none' stroke='%231f241e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 10h9.5' fill='none' stroke='%231f241e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.5l3 13-3-3-3 3z' fill='%231f241e'/%3E%3C/svg%3E");
}

.maplibregl-ctrl.maplibregl-ctrl-attrib,
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-4);
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--mid-gray);
}
.maplibregl-ctrl.maplibregl-ctrl-attrib a { color: var(--mid-gray); text-decoration: none; }
.maplibregl-ctrl-attrib a:hover { color: var(--foreground); }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 0; }
.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button { display: none; }
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { padding: 0; }

/* The credit line lives bottom-left, so keep it clear of the controls. */
.credit { z-index: 1; }