/* Campus Map tool — the standalone explore-the-campus page.
   The emulator's map is a 460px panel inside a schedule; this one is the page,
   so it takes the height instead of a fixed box. */

.cmap-wrap { max-width: 1400px; }

/* ---------------------------------------------------------------- controls */
.cmap-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 6px;
}
.cmap-bar2 { justify-content: space-between; margin-bottom: 8px; }

.cmap-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.cmap-search input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 6px 9px; border: 1px solid #7d99a6; border-radius: 3px; background: #fff;
}
.cmap-search input:focus { outline: 2px solid #0A4A65; outline-offset: -1px; }

/* Above Leaflet's own controls. Leaflet puts the +/- buttons at z-index 1000 in
   its own stacking context, so the results list — at any z-index below that —
   rendered UNDER them and the top two hits were unclickable. */
.cmap-sugg {
  position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid #7d99a6; border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); max-height: 320px; overflow-y: auto;
}
/* ...and the search box itself has to make a stacking context above the map,
   or raising only the dropdown inside it changes nothing. */
.cmap-search { z-index: 1200; }
.cmap-hit { padding: 5px 9px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.cmap-hit:hover { background: #eaf2f6; }
.cmap-hit b { font-weight: bold; color: #14304d; }
.cmap-cat { color: #6a7c86; font-size: 11px; }
.cmap-hours { color: #6a7c86; }

.cmap-cats, .cmap-layers { display: flex; gap: 6px; flex-wrap: wrap; }
.cmap-actions { display: flex; gap: 6px; }

/* A category chip is OFF until switched on, and says so by going pale — colour
   only ever means "this is on the map right now". */
.cmap-chip {
  font: inherit; font-size: 11px; line-height: 1.6; cursor: pointer;
  padding: 3px 9px; border: 1px solid #9fb3bd; border-radius: 999px;
  background: #f4f7f9; color: #5a6b74;
  display: inline-flex; align-items: center; gap: 6px;
}
.cmap-chip:hover { border-color: #0A4A65; color: #14304d; }
.cmap-chip.on { background: #0A4A65; border-color: #0A4A65; color: #fff; font-weight: bold; }
.cmap-chip.lyr.on { background: #8a5a12; border-color: #8a5a12; }
.cmap-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); flex: none; }
.cmap-chip:not(.on) .cmap-dot { border-color: rgba(0,0,0,.25); }

.cmap-btn {
  font: inherit; font-size: 11px; cursor: pointer; padding: 3px 10px;
  border: 1px solid #9fb3bd; border-radius: 3px; background: #eef2f4; color: #14304d;
}
.cmap-btn:hover { border-color: #0A4A65; }

/* ------------------------------------------------------------ walk routes */
.cmap-bar3 { margin-bottom: 6px; gap: 8px; }
.cmap-route-cap { font-size: 11px; font-weight: bold; color: #14304d; }
.cmap-days { display: flex; gap: 6px; flex-wrap: wrap; }
.cmap-chip:disabled { cursor: default; opacity: .55; }
.cmap-route-total { font-size: 11px; color: #14304d; font-weight: bold; margin-left: auto; }

/* One line per leg, small — a readout, not a table. Amber is the schedule-
   tightness warning: the walk takes longer than the gap between the classes.
   The same amber is on the polyline, so the row and the line read as one. */
.cmap-legs {
  font-size: 11px; color: #4a5b64; line-height: 1.7;
  padding: 0 2px 6px;
}
.cmap-leg.tight { color: #B45309; font-weight: bold; }
.cmap-leg-hint { color: #6a7c86; font-style: italic; }

/* Numbered stop pin: navy disc, white number, visit order at a glance. A
   shared pin ("2·3") is two consecutive classes in the same building. */
.cmap-stop span {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #0A4A65; color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font-size: 11px; font-weight: bold; box-sizing: border-box;
}

/* -------------------------------------------------------------------- map */
/* Fills what is left of the window under the chrome, with a floor so it never
   collapses on a short screen and a cap so it stays usable on a very tall one. */
#cmap {
  height: clamp(460px, calc(100vh - 340px), 900px);
  width: 100%; background: #e8eef0; border: 1px solid #0A4A65;
}
#cmap.leaflet-container { font: inherit; font-size: 12px; }
/* Only the tile pane — pins, outlines and labels are in sibling panes and keep
   their full contrast while the basemap steps back. Same treatment as the
   emulator's map so the two read as one product. */
#cmap .leaflet-tile-pane { filter: saturate(.5) brightness(1.06) contrast(.92); }
#cmap .leaflet-popup-content { font-size: 12px; line-height: 1.5; }
#cmap .leaflet-popup-content b { color: #0A4A65; }
#cmap .leaflet-control-zoom a { color: #0A4A65; font-weight: bold; }

/* College name written across its own area. Not a tooltip — it is part of the
   drawing, so it must not intercept clicks meant for the pins underneath. */
/* Each college's name in that college's own colour. The heavy white halo is
   what keeps a dark navy or deep purple readable over the basemap. */
.cmap-arealbl {
  font-weight: bold; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 1px 0 #fff;
  transform: translate(-50%, -50%);
}

/* The eight college swatches, so the colours on the map mean something without
   having to zoom in far enough to read a label. */
.cmap-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-left: 4px; }
.cmap-legend-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: #4a5b64; white-space: nowrap;
}
.leaflet-tooltip.cmap-areatip {
  background: #fff; color: #14304d; border: 1px solid #b9c9d1; font-size: 11px;
  font-weight: bold; padding: 2px 7px; border-radius: 3px;
}

.cmap-foot {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: #6a7c86; padding: 5px 2px 14px;
}
.cmap-fallback {
  border: 1px solid #0A4A65; border-top: none; padding: 14px;
  font-size: 12px; color: #333; background: #fff;
}

@media (max-width: 720px) {
  #cmap { height: clamp(380px, calc(100vh - 380px), 700px); }
  .cmap-bar2 { flex-direction: column; align-items: flex-start; }
}