* { box-sizing: border-box; }

:root {
  --green-950: #0d3027;
  --green-900: #113d31;
  --green-800: #185340;
  --green-700: #1f6a50;
  --green-500: #45a17c;
  --green-200: #b9ddce;
  --green-100: #e6f2ed;
  --ink: #18312a;
  --muted: #64766f;
  --paper: #f5f8f6;
  --white: #fff;
  --amber: #d8932f;
  --red: #bd4d49;
  --border: #d9e4de;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }

.hero {
  min-height: 650px;
  padding: 22px max(24px, calc((100vw - 1240px) / 2));
  color: var(--white);
  background:
    radial-gradient(circle at 78% 10%, rgba(123, 194, 163, 0.18), transparent 32%),
    linear-gradient(150deg, var(--green-800), var(--green-950) 72%);
}

.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-nav .brand {
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.hero-nav div {
  display: flex;
  gap: 24px;
}

.hero-nav div a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  text-decoration: none;
}

.hero-nav div a:hover,
.hero-nav div a:focus-visible { color: #fff; }

.hero-copy {
  width: min(980px, 100%);
  margin: 70px auto 44px;
  text-align: center;
}

.eyebrow,
.panel-kicker,
.section-kicker {
  margin: 0 0 8px;
  color: var(--green-200);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6.5vw, 86px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

#rider-count {
  display: inline-block;
  color: #d5f0e3;
  font-variant-numeric: tabular-nums;
}

.hero-subtitle {
  max-width: 720px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
}

.trend-panel {
  width: min(1100px, 100%);
  margin: 0 auto -130px;
  padding: 24px 26px 20px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(7, 31, 24, 0.3);
}

.panel-heading,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.panel-kicker,
.section-kicker { color: var(--green-700); }

.panel-heading h2,
.section-heading h2,
.crowding-card h2,
.methodology h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.freshness {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.trend-canvas { height: 210px; margin-top: 18px; }

main {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 180px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.metric-strip article {
  min-width: 0;
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}

.metric-strip article:last-child { border-right: 0; }

.metric-strip span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-strip strong {
  display: block;
  margin-top: 3px;
  color: var(--green-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
}

.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr);
  gap: 28px;
}

.map-card,
.crowding-card,
.routes-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(22, 65, 51, 0.06);
}

.map-card > .section-heading,
.crowding-card,
.routes-card > .section-heading { padding: 24px; }

#vehicle-map {
  height: 590px;
  background: #dfe9e4;
}

.status-not-crowded { background: var(--green-500); }
.status-some-crowding { background: var(--amber); }
.status-crowded { background: var(--red); }
.status-unavailable { background: #7d8e87; }

.side-stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.crowding-card { padding-bottom: 18px; }
.crowding-card h2 { margin-bottom: 22px; }

.status-bars { display: grid; gap: 18px; }
.status-row { display: grid; gap: 7px; }

.status-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.status-label strong { color: var(--ink); font-size: 15px; }

.status-track {
  height: 9px;
  overflow: hidden;
  background: var(--green-100);
  border-radius: 999px;
}

.status-fill { height: 100%; min-width: 3px; border-radius: inherit; }

.compact { align-items: center; }

.estimate-label {
  padding: 4px 8px;
  color: var(--green-800);
  background: var(--green-100);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.route-table-wrap { max-height: 350px; overflow: auto; border-top: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }

th,
td { padding: 12px 20px; border-bottom: 1px solid #edf2ef; text-align: right; }
th:first-child,
td:first-child { text-align: left; }

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: #fbfcfb;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

td { font-size: 14px; font-variant-numeric: tabular-nums; }

.occupancy-legend {
  width: min(360px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 9px;
}

.occupancy-legend caption {
  padding-bottom: 6px;
  color: var(--green-700);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.occupancy-legend th,
.occupancy-legend td {
  position: static;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid #edf2ef;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.occupancy-legend th {
  color: var(--ink);
  background: #f6faf8;
  font-weight: 750;
}

.occupancy-legend th:last-child,
.occupancy-legend td:last-child { text-align: right; }

.occupancy-legend tbody tr:last-child td { border-bottom: 0; }

.occupancy-legend td:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}

.occupancy-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(24, 83, 64, 0.08);
}

.route-pill {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  padding: 4px 8px;
  color: #fff;
  background: var(--green-700);
  border-radius: 6px;
  font-weight: 780;
}

.empty-state { color: var(--muted); font-size: 13px; text-align: left; }

.methodology {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.45fr);
  gap: 70px;
  margin: 76px 0;
  padding: 48px;
  color: #eaf6f1;
  background: var(--green-900);
  border-radius: 18px;
}

.methodology .section-kicker { color: var(--green-200); }
.methodology-copy { color: rgba(255, 255, 255, 0.76); }
.methodology-copy p { margin: 0 0 16px; }
.methodology-copy p:last-child { margin-bottom: 0; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 28px max(24px, calc((100vw - 1240px) / 2));
  color: #76847f;
  background: #e8efeb;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

footer p { margin: 0; }

.mapboxgl-popup-content {
  padding: 12px 14px;
  color: var(--ink);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(13, 48, 39, 0.2);
}

.vehicle-popup strong { display: block; font-size: 15px; }
.vehicle-popup span { display: block; color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .hero { min-height: 610px; }
  .hero-copy { margin-top: 54px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-strip article:nth-child(2) { border-right: 0; }
  .metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .live-grid { grid-template-columns: 1fr; }
  #vehicle-map { height: 520px; }
  .side-stack { display: grid; grid-template-columns: 1fr 1fr; }
  .methodology { gap: 36px; padding: 38px; }
}

@media (max-width: 640px) {
  .hero { min-height: 620px; padding-inline: 18px; }
  .hero-nav div { gap: 14px; }
  .hero-copy { margin: 48px auto 36px; text-align: left; }
  .hero-subtitle { margin-left: 0; }
  .trend-panel { padding: 20px 18px 14px; border-radius: 14px; }
  .panel-heading { display: block; }
  .freshness { margin-top: 8px; }
  .trend-canvas { height: 180px; }
  main { width: min(100% - 28px, 1240px); padding-top: 165px; }
  .metric-strip article { padding: 16px; }
  .metric-strip strong { font-size: 25px; }
  .map-card > .section-heading { display: block; }
  .occupancy-legend { width: 100%; margin-top: 16px; }
  #vehicle-map { height: 440px; }
  .side-stack { display: flex; }
  .methodology { grid-template-columns: 1fr; gap: 24px; margin: 48px 0; padding: 28px 24px; }
  footer { display: block; padding-inline: 18px; }
  footer p + p { margin-top: 8px; }
}