/* GradLens — Map view */

/* The trail: animated arc from the person's start to a chosen college */
.route-arc { stroke-dasharray: 8 8; animation: gl-dashmove 1.2s linear infinite; }
@keyframes gl-dashmove { to { stroke-dashoffset: -16; } }

/* Graduate destination flows (2026-08-06): a marching-dash overlay on the
   bright line of each university-to-region flow arc, ported from the
   original GradLens prototype's .gl-flowline, re-coloured teal to match
   this rebuild. */
.gl-flowline {
  stroke-dasharray: 1 11;
  stroke-linecap: round;
  animation: gl-march 1.1s linear infinite;
  filter: drop-shadow(0 0 3px rgba(14, 158, 147, 0.55));
}
@keyframes gl-march { to { stroke-dashoffset: -24; } }

/* On-map guidance sentence (replaces the parked metric box) */
.gl-guide {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(27, 21, 48, 0.12);
  padding: 9px 14px;
  font-size: 13px;
  color: #4a4458;
  max-width: 300px;
  line-height: 1.5;
}
.gl-guide strong { color: #1b1530; }

/* ── Region choropleth controls (2026-07-05 carry-over) ──
   On-map Leaflet controls, not the .map-filters bar — that bar is hidden
   entirely when the map runs embedded inside browse.html's shell (the real,
   everyday case), so anything meant to always be visible has to live on the
   map itself. */
.gl-metric-switch {
  background: var(--surface, #fff);
  border-radius: var(--radius, 12px);
  box-shadow: 0 4px 16px rgba(27, 21, 48, 0.18);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 260px;
}
.gl-metric-btn {
  border: 1px solid var(--border, rgba(27,21,48,.12));
  background: #fff;
  color: var(--text-secondary, #6b6480);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.gl-metric-btn.active { background: var(--accent, #6d3a9e); border-color: var(--accent, #6d3a9e); color: #fff; }
.gl-sector-select {
  flex: 1 1 100%;
  margin-top: 2px;
  border: 1px solid var(--border, rgba(27,21,48,.12));
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text, #1b1530);
}
.gl-choro-legend {
  background: var(--surface, #fff);
  border-radius: var(--radius, 12px);
  box-shadow: 0 4px 16px rgba(27, 21, 48, 0.18);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--text, #1b1530);
  min-width: 160px;
}
.gl-choro-ramp {
  height: 8px;
  border-radius: 999px;
  margin: 6px 0 3px;
}
.gl-choro-ends { display: flex; justify-content: space-between; color: var(--text-muted, #8b85a0); font-size: 10.5px; }
.gl-choro-na { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-muted, #8b85a0); font-size: 10.5px; }
.gl-choro-hatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #e2e5ea, #e2e5ea 2px, #b0b4bd 2px, #b0b4bd 3px);
}

.map-body {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header override for map layout ───────────── */

.map-body .site-header {
  flex-shrink: 0;
  position: static;
  z-index: 200;
}


/* ── Filter row ────────────────────────────────── */

.map-filters {
  background: var(--bg);
  padding: 10px 22px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  z-index: 500;
}

.map-filters select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  min-height: 44px;
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.map-filters select:focus {
  border-color: var(--accent);
}

.map-filters .count {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto;
}

/* ── Search combobox ───────────────────────────── */

.search-box {
  position: relative;
  flex: 1;
  max-width: 360px;
}

.search-box input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  padding: 8px 14px 8px 32px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--shadow);
  display: none;
}

.search-dropdown.open { display: block; }

.search-result {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
  min-height: 44px;
}

.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--surface-hover); color: var(--accent); }

.search-result .sr-name {
  color: var(--text);
  font-weight: 600;
}

.search-result .sr-city {
  color: var(--text-secondary);
  font-size: 11px;
  margin-top: 1px;
}

/* ── Map + panel layout ────────────────────────── */

.map-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 520px;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

#map {
  background: #1e293b;
}

.leaflet-container {
  background: #1e293b;
  font-family: inherit;
}

.panel {
  background: var(--bg);
  border-left: 1px solid var(--glass-border);
  overflow-y: auto;
  padding: 18px 18px 30px;
}

.panel h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-muted);
  margin: 0 0 6px;
  font-weight: 600;
}

.panel-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ── Choice cards ──────────────────────────────── */

.slots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.slot-card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface);
  border-radius: 6px;
  padding: 10px 11px;
  min-height: 78px;
  position: relative;
}

.slot-card.empty {
  border-style: dashed;
  border-color: var(--surface);
}

.slot-card .slot-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--text-muted);
}

.slot-card .slot-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-top: 4px;
}

.slot-card .slot-city {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.slot-card .slot-clear {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.slot-card .slot-clear:hover { color: var(--text); }

.slot-card .slot-placeholder {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 10px;
}

/* ── Empty state ───────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--bg-elevated);
  border-radius: 6px;
  border: 1px dashed var(--surface);
}

.empty-state strong { color: var(--text); }

/* ── Single uni detail ─────────────────────────── */

.detail-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}

.detail-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.detail-city {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface);
  border-radius: 6px;
  padding: 12px 11px;
  text-align: center;
}

.hero-card .hc-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.hero-card .hc-value {
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 5px;
  line-height: 1.1;
}

.hero-card .hc-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.detail-section { margin-bottom: 18px; }

.detail-section h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 600;
}

.detail-section.country-section h3 {
  color: var(--accent);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 12.5px;
  color: var(--text);
}

.kv-row:last-child { border-bottom: none; }
.kv-row .kv-v { font-weight: 600; }

/* ── Compare grid ──────────────────────────────── */

.compare-grid {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 1fr;
  gap: 0;
  margin-top: 8px;
}

.cg-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--glass-border);
  align-self: center;
}

.cg-cell {
  font-size: 12.5px;
  color: var(--text);
  padding: 9px 8px;
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
  font-weight: 600;
}

.cg-cell.empty {
  color: var(--text-muted);
  font-weight: 400;
}

.cg-cell .airport-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
  display: block;
}

.cg-header {
  background: var(--bg-elevated);
  font-size: 11px;
  color: var(--text-secondary);
  padding: 8px;
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
  font-weight: 600;
}

.cg-header .cg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* ── RAG badges ────────────────────────────────── */

.rag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}

.rag-green { background: rgba(52, 211, 153, 0.18); color: var(--green); }
.rag-amber { background: rgba(251, 191, 36, 0.18); color: var(--amber); }
.rag-red { background: rgba(248, 113, 113, 0.18); color: var(--red); }
.rag-na { background: rgba(100, 116, 139, 0.18); color: var(--text-secondary); }

.entry-band {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}
.entry-open { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
.entry-accessible { background: rgba(52, 211, 153, 0.18); color: var(--green); }
.entry-moderate { background: rgba(251, 191, 36, 0.18); color: var(--amber); }
.entry-selective { background: rgba(251, 146, 60, 0.18); color: #fb923c; }
.entry-highly-selective { background: rgba(248, 113, 113, 0.18); color: var(--red); }

.direct-tag {
  display: inline-block;
  background: rgba(52, 211, 153, 0.18);
  color: var(--green);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.nodirect-tag {
  display: inline-block;
  background: rgba(251, 191, 36, 0.18);
  color: var(--amber);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── Map dots ──────────────────────────────────── */

.leaflet-marker-icon {
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
}

.uni-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0891b2;
  border: 1.5px solid #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  transition: width 0.2s, height 0.2s, background 0.2s, box-shadow 0.2s;
}

.uni-dot.idle-pulse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0891b2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.4;
  animation: pulse-idle 2.6s ease-out infinite;
  z-index: -1;
}

.uni-dot.chosen {
  width: 18px;
  height: 18px;
  background: var(--dot-col);
  border-color: #fff;
  box-shadow: 0 0 10px var(--dot-col), 0 0 22px var(--dot-col), 0 0 4px rgba(0, 0, 0, 0.5);
}

.uni-dot.chosen .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dot-col);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse-ring 1.8s ease-out infinite;
  z-index: -1;
}

.uni-dot.chosen .ring.delay { animation-delay: 0.9s; }

@keyframes pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

@keyframes pulse-idle {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* Matched-option pins (2026-08-04, softened same day per Nic: "more like
   they are lighting up"): when the map is showing a career's real options,
   each pin breathes a slow soft glow — a light coming on, not an alarm.
   The same glow lights the university pins (via .gl-lit on the map
   container) once a subject is chosen. The faint idle-pulse above is the
   ambient shimmer every dot has, not a signal. */
.uni-dot.gl-match {
  width: 13px; height: 13px;
  background: var(--accent, #6d3a9e);
  animation: glow-soft-purple 3.2s ease-in-out infinite;
}
.gl-lit .uni-dot,
.gl-lit .ul-cluster {
  animation: glow-soft-teal 3.2s ease-in-out infinite;
}
@keyframes glow-soft-purple {
  0%, 100% { box-shadow: 0 0 3px 1px rgba(109, 58, 158, 0.25); }
  50%      { box-shadow: 0 0 14px 5px rgba(109, 58, 158, 0.65); }
}
@keyframes glow-soft-teal {
  0%, 100% { box-shadow: 0 0 3px 1px rgba(14, 158, 147, 0.25); }
  50%      { box-shadow: 0 0 14px 5px rgba(14, 158, 147, 0.7); }
}

/* ── Map tooltips + legend ─────────────────────── */

.leaflet-tooltip {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  font-size: 12px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 8px 12px !important;
}

.leaflet-tooltip-top::before { border-top-color: rgba(15, 23, 42, 0.92) !important; }

.map-legend {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 11px;
  color: #f1f5f9;
  line-height: 1.7;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.map-legend strong { color: var(--accent); }

.map-legend .leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1.5px solid #fff;
}

/* ── Brief button ──────────────────────────────── */

.brief-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), #0891b2);
  color: var(--bg);
  border: none;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
  font-family: inherit;
  letter-spacing: 0.3px;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.brief-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.3);
}

.brief-btn:disabled {
  background: var(--surface);
  color: var(--text-muted);
  cursor: not-allowed;
}

.brief-icon { font-size: 14px; }

.brief-sub {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.75;
  margin-left: 4px;
}

/* ── Link to profile ───────────────────────────── */

.view-profile-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.view-profile-link:hover { color: #22d3ee; }

/* ── Destinations in panel ────────────────────── */

.panel-destinations {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}

.panel-destinations .destination-strip {
  margin-bottom: 0;
}

.panel-destinations .dest-pills {
  flex-wrap: wrap;
}

/* ── Mobile responsiveness ───────────────────── */

@media (max-width: 768px) {
  .map-body {
    height: auto;
    overflow: auto;
  }

  .map-filters {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 6px;
  }

  .search-box {
    max-width: none;
    flex-basis: 100%;
    order: -1;
  }

  .map-filters select {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    font-size: 12px;
    padding: 7px 10px;
  }

  .map-filters .count {
    flex-basis: 100%;
    text-align: center;
    margin-left: 0;
  }

  .map-layout {
    display: flex;
    flex-direction: column;
  }

  #map {
    height: 45vh;
    min-height: 280px;
    flex-shrink: 0;
  }

  .panel {
    border-left: none;
    border-top: 1px solid var(--glass-border);
    min-height: 0;
    overflow-y: visible;
    padding: 14px 14px 100px;
  }

  .slots {
    gap: 6px;
  }

  .slot-card {
    padding: 8px 9px;
    min-height: 60px;
  }

  .slot-card .slot-name { font-size: 11px; }
  .slot-card .slot-placeholder { font-size: 10px; }

  .hero-cards { gap: 6px; }
  .hero-card { padding: 10px 8px; }
  .hero-card .hc-value { font-size: 17px; }
  .hero-card .hc-label { font-size: 9px; }
  .hero-card .hc-sub { font-size: 9.5px; }

  .compare-grid {
    grid-template-columns: 100px 1fr 1fr 1fr;
  }

  .cg-label { font-size: 9.5px; padding: 7px 6px 7px 0; }
  .cg-cell { font-size: 11.5px; padding: 7px 6px; }
  .cg-header { font-size: 10px; }

  .detail-name { font-size: 16px; }

  .kv-row { font-size: 12px; padding: 6px 0; }

  .brief-btn { font-size: 12px; padding: 11px 12px; }
}

@media (max-width: 420px) {
  .slots { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .slot-card .slot-name { font-size: 10px; }

  .hero-cards { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .hero-card .hc-value { font-size: 15px; }

  .compare-grid {
    grid-template-columns: 80px 1fr 1fr 1fr;
  }
  .cg-label { font-size: 9px; }
  .cg-cell { font-size: 11px; padding: 6px 4px; }
}

/* ════ D2 RULES LAYER — 2026-06-11 ════════════════════════════
   Implements site/mockups/DESIGN-RULES.md on browse + map pages.
   Dark until picked → white when chosen. White = data, chosen, the way in.
   Gradient = action. Sheen = next step. Remove block to revert. */

/* 1 · Boxes float on the dark floor */
.inst-item,
.compare-main {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.inst-item {
  border-radius: 16px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.inst-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* 2 · Chosen things turn white */
.inst-item-selected,
a.inst-item.inst-item-selected {
  background: #bfeefb;
  box-shadow: 0 0 0 1.5px rgba(6, 182, 212, 0.45), 0 6px 22px rgba(6, 182, 212, 0.22);
}
.inst-item-selected .inst-item-name { color: #0f172a; }
.inst-item-selected .inst-item-stat { color: #5b6e85; }
.inst-item-selected .inst-item-stat svg { opacity: 0.7; }
.compare-selected:not([hidden]) {
  background: #bfeefb;
  border-color: transparent;
}
.compare-selected .compare-selected-name { color: #0f172a; }

/* 3 · White is the way in: search field */
.browse-filters .search-box input,
.map-filters .search-box input,
.search-bar input {
  background: #ffffff;
  color: #0f172a;
  border-color: transparent;
}
.browse-filters .search-box input::placeholder,
.map-filters .search-box input::placeholder,
.search-bar input::placeholder {
  color: #64748b;
}
.browse-filters .search-box .search-icon,
.map-filters .search-box .search-icon {
  color: #64748b;
}

/* 4 · Gradient marks the important action */
.brief-btn:not(:disabled),
.auth-signup,
.vt-btn.active {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #ffffff;
  border: none;
}

/* 5 · Data is white, labels stay quiet */
.metric-value {
  background: none;
  -webkit-text-fill-color: #ffffff;
  background-clip: border-box;
  color: #ffffff;
}
.compare-table tbody td { color: #ffffff; }
.compare-table tbody td:first-child { color: var(--text-muted); }

/* 6 · The next logical step carries a slow sheen (one element only) */
.browse-filters select#filter-subject,
.map-filters select#filter-subject {
  background-image: linear-gradient(110deg, transparent 35%, rgba(6, 182, 212, 0.25) 50%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: ul-sheen 4s ease-in-out infinite;
}
@keyframes ul-sheen {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -130% 0; }
}
/* ════ end D2 rules layer ════════════════════════════════════ */

/* D2 rules layer addendum: slim footer (trust line stays, legal shrinks) */
.landing-footer { padding: 10px 24px 12px; font-size: 12px; line-height: 1.5; }
.landing-footer .footer-legal { margin-top: 4px; font-size: 10px; opacity: 0.65; }

/* D2 rules layer addendum 2: chosen things turn white in the compare slots too,
   and the chosen marker goes gradient */
.slot-card:not(.empty) {
  background: #bfeefb;
  border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(6, 182, 212, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.slot-card:not(.empty) .slot-name { color: #0f172a; }
.slot-card:not(.empty) .slot-city { color: #5b6e85; }
.slot-card:not(.empty) .slot-clear { color: #5b6e85; }
.inst-item-add.added {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #ffffff;
  border: none;
}


/* D2 rules layer addendum 3: calm compare table.
   One surface, one rhythm, quiet signals. */
.compare-table thead th { background: transparent; }
.compare-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  vertical-align: middle;
}
.compare-table .rag,
.compare-table .entry-band {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  font-size: 11.5px;
}
.compare-table .rag::before,
.compare-table .entry-band::before {
  content: "\25CF";
  font-size: 8px;
  margin-right: 5px;
  vertical-align: 1px;
}

/* D2 rules layer addendum 4: calm the side-panel compare grid (cg-*) */
.cg-header { background: transparent; }
.cg-cell, .cg-label {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}
.cg-cell { justify-content: center; }
.cg-cell .rag,
.cg-cell .entry-band {
  background: transparent;
  padding: 0;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.35;
}
.cg-cell .rag::before,
.cg-cell .entry-band::before {
  content: "\25CF";
  font-size: 8px;
  margin-right: 5px;
  vertical-align: 1px;
}

/* D2 rules layer addendum 5: stop the page itself scrolling past the app
   (html has overflow-x set, which un-propagates body's overflow:hidden,
   so the viewport scrolls into the void below the footer). Desktop only —
   mobile intentionally stacks and scrolls. */
@media (min-width: 601px) {
  html:has(.browse-body),
  html:has(.map-body) {
    overflow-y: hidden;
    height: 100%;
  }
}

/* D2 rules layer addendum 6: the compare panel must never clip.
   Wider panel (reclaimed from the map), and grid columns that
   shrink-and-wrap instead of sliding off the edge. */
.map-layout {
  grid-template-columns: 1fr clamp(520px, 44vw, 680px);
}
.compare-grid {
  grid-template-columns: 96px repeat(3, minmax(0, 1fr));
}
.cg-cell {
  min-width: 0;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.35;
}
.browse-layout {
  grid-template-columns: 1fr clamp(520px, 44vw, 680px);
}

/* D2 rules layer addendum 7: a breath of brand gradient over the sea.
   Sits above the tiles, below the dots; clicks pass straight through. */
#map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(6, 182, 212, 0.14) 0%,
    rgba(6, 182, 212, 0.04) 30%,
    rgba(139, 92, 246, 0.04) 70%,
    rgba(139, 92, 246, 0.14) 100%);
}

/* D2 rules layer addendum 8: cluster bubbles — floating boxes of the map.
   Navy circle, cyan ring, white count. */
.ul-cluster-wrap { background: none; border: none; }
.ul-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16335e;
  border: 2px solid #06b6d4;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(6, 182, 212, 0.15);
  transition: transform 0.15s;
}
.ul-cluster:hover { transform: scale(1.08); }

/* D2 rules layer addendum 9: destination countries breathe at world height */
.ul-country-glow {
  animation: ul-country-pulse 3.2s ease-in-out infinite;
}
@keyframes ul-country-pulse {
  0%, 100% { fill-opacity: 0.16; }
  50% { fill-opacity: 0.34; }
}

/* D2 rules layer addendum 10 (v2): the opener lockup.
   A composed title card over the world: kicker, gradient headline, CTA.
   A soft radial veil lifts it from the map labels beneath. */
.ul-opener {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 14vh;
  pointer-events: none;
  text-align: center;
  font-family: Inter, sans-serif;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.ul-opener::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 420px;
  top: calc(50% - 14vh - 210px);
  left: calc(50% - 320px);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
}
.ul-opener.show { opacity: 1; transform: translateY(0); }
.ul-opener-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 14px;
}
.ul-opener-line {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1px;
  background: linear-gradient(100deg, #6d3a9e 10%, #0e9e93 60%, #6d3a9e 110%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ul-tag-drift 8s linear infinite;
  filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.45));
}
@keyframes ul-tag-drift {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.ul-opener-cta {
  pointer-events: auto;
  margin-top: 22px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  padding: 13px 34px;
  border-radius: 99px;
  background: #e4572e;
  box-shadow: 0 8px 26px rgba(228, 87, 46, 0.35);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ul-opener-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(228, 87, 46, 0.45);
}
.ul-opener-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: sheen-cta 3.5s ease-in-out infinite;
}
@keyframes sheen-cta {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(110%); }
}
.ul-confetti {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  z-index: 850;
  pointer-events: none;
}
.ul-home-glow {
  animation: ul-home-pulse 3.2s ease-in-out infinite;
}
@keyframes ul-home-pulse {
  0%, 100% { fill-opacity: 0.22; }
  50% { fill-opacity: 0.42; }
}

/* D2 rules layer addendum 11: journey arcs flow from home to chosen */
.ul-journey-arc {
  stroke-dasharray: 7 9;
  animation: ul-arc-flow 1.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.55));
}
@keyframes ul-arc-flow {
  to { stroke-dashoffset: -16; }
}

/* D2 rules layer addendum 12: narrowing sentence — numbers are white */
.browse-filters .count b,
.map-filters .count b {
  color: #ffffff;
  font-weight: 700;
}

/* D2 rules layer addendum 13: constellation twinkle */
.ul-twinkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(6, 182, 212, 1), 0 0 18px rgba(6, 182, 212, 0.6), 0 0 30px rgba(139, 92, 246, 0.35);
  z-index: 840;
  pointer-events: none;
}

/* D2 rules layer addendum 14: the narrowing sentence gets a home —
   a floating chip, not loose text on the bar */
.browse-filters .count,
.map-filters .count {
  background: rgba(31, 44, 70, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 99px;
  padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* D2 rules layer addendum 15: the narrowing sentence moves to where the
   action is. Map page: floats in the map's top-left corner, past the zoom
   control. Browse page: tucks in right beside the filters. */
.map-body .map-filters .count {
  position: absolute;
  left: 60px;
  top: 158px;
  z-index: 600;
  margin-left: 0;
}
.browse-body .browse-filters .count {
  margin-left: 12px;
}

/* D2 rules layer addendum 16: compact narrowing pill typography */
.browse-filters .count .nar-total,
.map-filters .count .nar-total {
  color: #8da0b8;
}
.browse-filters .count .nar-arrow,
.map-filters .count .nar-arrow {
  color: #06b6d4;
  font-weight: 700;
}
.browse-filters .count b,
.map-filters .count b {
  font-size: 14px;
}

/* D2 rules layer addendum 17: the summary moment — loading bar, plane, ready state */
.brief-btn.journey-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: wait;
  background: #16335e;
  color: #dbe6f2;
}
.journey-text { font-size: 13px; font-weight: 600; }
.journey-track {
  display: block;
  width: 80%;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.journey-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #06b6d4, #8b5cf6);
  transition: width 4s linear;
}
.brief-btn.journey-ready {
  background: linear-gradient(90deg, #06b6d4, #8b5cf6);
  color: #fff;
  font-weight: 700;
}
.ul-plane {
  position: absolute;
  z-index: 870;
  font-size: 22px;
  color: #5b21b6;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.3);
  pointer-events: none;
}
.ul-confetti-fixed { position: fixed; z-index: 9999; }

/* D2 rules layer addendum 18: New student reset */
.new-student-btn {
  float: right;
  margin: -2px 0 0 12px;
  background: none;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 99px;
  color: #8da0b8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.new-student-btn:hover {
  color: #f8fafc;
  border-color: #06b6d4;
}

/* D2 rules layer addendum 19: map life — whale, balloon, cloud */
.ul-sky {
  position: absolute;
  z-index: 460; /* above the sea wash, below the dots */
  pointer-events: none;
}
.ul-whale {
  transform: translate(-50%, -50%);
  animation: ul-whale-visit 8s ease-in-out forwards;
}
@keyframes ul-whale-visit {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
.ul-whale .ul-whale-body {
  animation: ul-whale-bob 8s ease-in-out forwards;
  transform-origin: 50% 80%;
}
@keyframes ul-whale-bob {
  0%   { transform: translateY(14px) rotate(-2deg); }
  18%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(16px) rotate(3deg); }
}
.ul-whale .ul-whale-spout {
  opacity: 0;
  animation: ul-whale-spout 8s ease-out forwards;
  transform-origin: 16px 12px;
}
@keyframes ul-whale-spout {
  0%, 20% { opacity: 0; transform: scale(0.3) translateY(4px); }
  28%     { opacity: 0.95; transform: scale(1) translateY(0); }
  42%     { opacity: 0; transform: scale(1.25) translateY(-4px); }
  50%     { opacity: 0.85; transform: scale(0.9) translateY(0); }
  64%     { opacity: 0; transform: scale(1.2) translateY(-4px); }
  100%    { opacity: 0; }
}
.ul-balloon svg {
  animation: ul-balloon-bob 5s ease-in-out infinite;
}
@keyframes ul-balloon-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-7px) rotate(1.5deg); }
}
.ul-cloud {
  width: 110px;
  height: 30px;
  background: #ffffff;
  border-radius: 99px;
  opacity: 0.22;
  box-shadow: 28px -14px 0 6px #ffffff, 58px -8px 0 2px #ffffff;
}

/* Synced views 2026-06-11: logged course lines on slot cards (browse + map) */
.slot-card .slot-course { font-size: 11px; font-weight: 600; color: #0e7490; margin-top: 5px; line-height: 1.35; }
.slot-card .slot-course-more { font-weight: 400; opacity: 0.75; }

/* School pins (2026-07-30): smaller and plum, against the cyan college/uni
   dots, so a mixed map of 4,000+ providers reads at a glance. */
.school-dot {
  width: 8px;
  height: 8px;
  background: #6d3a9e;
}