/**
 * @file map-projects.css
 * @purpose Style project type/stage controls, status and shared panel primitives.
 * @dependencies Layer-menu and map-shell primitives from styles.css and map-modes.css.
 * @public Project-mode classes used by map.html and map-projects.js.
 * @sideEffects Changes presentation only while the project mode or panel is visible.
 */

/* Project-mode swatch and independently selectable type/stage groups. */
.layer-swatch-projects {
  background:
    radial-gradient(circle at 28% 30%, #4c9aff 0 14%, transparent 15%),
    radial-gradient(circle at 70% 34%, #17a398 0 14%, transparent 15%),
    radial-gradient(circle at 35% 73%, #f2ad32 0 14%, transparent 15%),
    radial-gradient(circle at 75% 74%, #ed6a5a 0 14%, transparent 15%),
    linear-gradient(145deg, #dbe6dd, #92b6c0);
}

.project-legend {
  display: none;
  margin-top: 0.42rem;
  padding: 0.7rem 0.58rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

body[data-map-tool="projects"] .project-legend {
  display: block;
}

.project-legend-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.project-legend-heading strong {
  font-size: 0.67rem;
}

.project-legend-heading span {
  padding: 0.13rem 0.34rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.48rem;
  letter-spacing: 0.04em;
}

/* The longer type legend scrolls inside the existing mode menu. */
body[data-map-tool="projects"] .layer-dropdown { max-height: calc(100dvh - 8rem); overflow-y: auto; scrollbar-width: thin; }
.project-filter-group { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.project-filter-group legend { margin-bottom: 6px; padding: 0; color: #c1c7cf; font-size: 10px; font-weight: 650; }
.project-legend ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.project-legend li { min-width: 0; color: #e4e7ec; font-size: 11px; }
.project-filter-option { display: grid; grid-template-columns: 12px 10px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.project-filter-option input { width: 12px; height: 12px; margin: 0; accent-color: #b8c3d0; cursor: pointer; }
.project-filter-option input:focus-visible { outline: 2px solid #b8c3d0; outline-offset: 2px; }
.project-filter-color { width: 9px; height: 9px; border: 1px solid #ffffffa8; border-radius: 50%; background: var(--project-filter-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--project-filter-color) 18%, transparent); }
.project-filter-option input:not(:checked) ~ .project-filter-color,
.project-filter-option input:not(:checked) ~ span { opacity: .42; }
@media (max-width: 44rem) {
  body[data-map-tool="projects"] .layer-dropdown { max-height: calc(100dvh - 6.9rem); }
}

/* Provider status and selected-project details. */
.project-legend-status {
  display: block;
  min-height: 1.35em;
  margin-top: 0.62rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.5rem;
  line-height: 1.35;
}

.project-legend-status[data-state="loading"]::before {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.34rem;
  border: 1px solid rgba(66, 133, 244, 0.25);
  border-top-color: #4285F4;
  border-radius: 50%;
  content: "";
  animation: spin 700ms linear infinite;
}

.project-legend-status[data-state="error"] {
  color: #ff9d9d;
}

.project-legend-note {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.48rem;
  line-height: 1.35;
}

.project-details {
  position: absolute;
  z-index: 8;
  top: 4.65rem;
  right: 1rem;
  width: min(22rem, calc(100% - 6rem));
  max-height: calc(100dvh - 9rem);
  overflow: hidden;
  border: 1px solid rgba(20, 37, 31, 0.14);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 52px rgba(20, 37, 31, 0.25);
  color: #26342e;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.project-details[hidden] {
  display: none;
}

.project-details-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 0.9rem 0.72rem;
  border-bottom: 1px solid rgba(20, 37, 31, 0.1);
}

.project-details-header small,
.project-details-header h2 {
  display: block;
}

.project-details-header small {
  margin-bottom: 0.2rem;
  color: #708078;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-details-header h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.24;
}

.project-details-close {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf2ee;
  color: #53635b;
  font-size: 1rem;
  cursor: pointer;
  place-items: center;
}

.project-details-close:hover,
.project-details-close:focus-visible {
  background: #dfe9e2;
  outline: 2px solid rgba(23, 132, 90, 0.24);
}

.project-details-body {
  max-height: calc(100dvh - 14rem);
  padding: 0.85rem 0.9rem 1rem;
  overflow-y: auto;
}

.project-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.project-stage-badge,
.project-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.34rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--project-stage-color) 55%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-stage-color) 16%, #ffffff);
  color: #26342e;
  font-size: 0.62rem;
  font-weight: 850;
}

.project-type-badge {
  border-color: #dce5df;
  background: #f0f4f1;
}

.project-stage-badge::before {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--project-stage-color);
  content: "";
}

.project-details-message {
  margin: 0;
  padding: 0.7rem;
  border-radius: 0.55rem;
  background: #f3f6f4;
  color: #627068;
  font-size: 0.66rem;
  line-height: 1.5;
}

.project-detail-list {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 0.42rem 0.7rem;
  margin: 0.85rem 0 1rem;
  font-size: 0.67rem;
}

.project-detail-list dt {
  color: #718078;
  font-weight: 750;
}

.project-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 720;
}

.project-details-body h3 {
  margin: 0.1rem 0 0.55rem;
  font-size: 0.72rem;
}

.project-history {
  display: grid;
  gap: 0.46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-history li {
  padding: 0.52rem 0.58rem;
  border-left: 3px solid #d9e3dc;
  border-radius: 0 0.42rem 0.42rem 0;
  background: #f3f6f4;
}

.project-history strong,
.project-history span {
  display: block;
}

.project-history strong {
  font-size: 0.64rem;
  line-height: 1.35;
}

.project-history span {
  margin-top: 0.18rem;
  color: #718078;
  font-size: 0.56rem;
  line-height: 1.4;
}

.project-data-note {
  margin: 0.75rem 0 0;
  padding: 0.58rem 0.62rem;
  border-radius: 0.5rem;
  background: #fff8dc;
  color: #665b31;
  font-size: 0.57rem;
  line-height: 1.4;
}

.project-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.72rem;
}

.project-source-links a {
  padding: 0.4rem 0.56rem;
  border: 1px solid rgba(23, 132, 90, 0.2);
  border-radius: 0.46rem;
  background: #eff8f3;
  color: #176c4b;
  font-size: 0.58rem;
  font-weight: 820;
  text-decoration: none;
}

@media (max-width: 44rem) {
  .project-details {
    top: 6.8rem;
    right: 0.65rem;
    bottom: 3rem;
    width: min(20rem, calc(100% - 5rem));
    max-height: none;
  }

  .project-details-body {
    max-height: calc(100dvh - 14.8rem);
  }

  .project-detail-list {
    grid-template-columns: 6.3rem minmax(0, 1fr);
  }
}