/* ============================================================
   style.css — all the visual styling for the app
   ============================================================
   CSS is read top to bottom. Each rule says:
       selector { property: value; }
   e.g.  header { background: #17324d; }  paints the header dark blue.

   Colors are written as hex codes (#rrggbb). To try a different
   look, change the color values — nothing will break.
   ============================================================ */

/* Apply to every element: include borders in size math, no default margins */
* { box-sizing: border-box; margin: 0; }

/* The whole page: a vertical stack (header on top, main below) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  height: 100vh;              /* fill the browser window exactly */
  display: flex;
  flex-direction: column;
  background: #f6f7f9;
  color: #222;
}

/* ---------- header bar ---------- */
header {
  padding: 10px 16px;
  background: #17324d;        /* dark blue — change me! */
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
header h1 { font-size: 18px; font-weight: 600; }
header .subtitle { font-size: 12.5px; opacity: 0.75; }

/* ---------- the two-panel layout ---------- */
/* "grid-template-columns: 55% 45%" = map panel gets 55% of the width */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 0;              /* allows panels to shrink properly */
}

section { display: flex; flex-direction: column; min-height: 0; }
#map-panel { border-right: 1px solid #d7dbe0; }

/* ---------- toolbars above map and chart ---------- */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e2e5e9;
  font-size: 13px;
  flex-wrap: wrap;            /* wrap onto a second line if too narrow */
}
.controls label { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.controls select { font-size: 13px; padding: 3px 4px; max-width: 170px; }

#year-slider { flex: 1; min-width: 120px; }
#year-label { font-weight: 700; font-variant-numeric: tabular-nums; width: 42px; }
#play-btn {
  width: 30px; height: 26px;
  border: 1px solid #bbb; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 12px;
}
#play-btn:hover { background: #eef2f6; }
#flip-btn {
  border: 1px solid #bbb; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 12px; padding: 3px 8px;
}
#map-status, #chart-status { font-size: 12px; color: #888; }
.diff-ctl { font-weight: 600; white-space: nowrap; }

/* ---------- the map area ---------- */
/* map-wrap holds the map (and the second map in Dual mode) side by side */
#map-wrap { flex: 1; min-height: 0; display: flex; position: relative; }
#map  { flex: 1; min-height: 0; }
#map2 { flex: 1; min-height: 0; border-left: 2px solid #fff; }
#chart { flex: 1; min-height: 0; }

/* ---------- swipe divider (Swipe mode only) ---------- */
/* a thin white vertical bar you can drag left/right */
#swipe-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  cursor: ew-resize;
  z-index: 900;               /* draw on top of the map */
  touch-action: none;         /* let us handle touch dragging ourselves */
}
/* the round handle in the middle of the divider */
#swipe-divider .handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;         /* 50% radius = a circle */
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #333;
  user-select: none;
}

/* ---------- year badges shown over the map ---------- */
.year-badge {
  position: absolute;
  top: 10px;
  padding: 3px 10px;
  background: rgba(23,50,77,0.85);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 5px;
  z-index: 900;
  pointer-events: none;       /* clicks pass through to the map */
}
#badge-a { left: 52px; }      /* left badge sits right of the zoom buttons */
#badge-b { right: 10px; }

/* ---------- map legend (bottom-left color bar) ---------- */
.legend {
  background: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  font-size: 11.5px;
  line-height: 1.3;
}
.legend .bar {
  width: 160px; height: 12px;
  border-radius: 2px;
  margin: 4px 0 2px;
}
.legend .ticks { display: flex; justify-content: space-between; }

/* ---------- "+ Compare" chips ---------- */
#compare-add, #compare-clear {
  border: 1px solid #b9cbdd;
  background: #eef4fa;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
#compare-add:hover, #compare-clear:hover { background: #dbe8f5; }
#compare-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e3ecf5;
  border: 1px solid #b9cbdd;
  border-radius: 12px;        /* rounded pill shape */
  padding: 1px 8px;
  font-size: 12px;
}
.chip button {
  border: none; background: none; cursor: pointer;
  font-size: 13px; padding: 0; color: #666; line-height: 1;
}
.chip button:hover { color: #d33; }

/* ---------- small screens: stack the panels vertically ---------- */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  #map-panel { border-right: none; border-bottom: 1px solid #d7dbe0; }
}