/**
 * @file map-project-panel.css
 * @purpose Compact charcoal project inspector with a fixed header and internal scrolling.
 * @dependencies map-projects.css shared panel primitives and map-project-details.js markup.
 * @public #project-details only; valuation and renewable panels keep their existing styles.
 * @sideEffects Presentation only; pointer interaction outside this bounded panel reaches the map.
 */

/* Bounded inspector and persistent header. */
#project-details {
  display: flex;
  flex-direction: column;
  top: 4.75rem;
  right: 4.25rem;
  width: 360px;
  max-width: calc(100% - 6rem);
  max-height: min(40rem, 72dvh, calc(100dvh - 7rem));
  border: 1px solid #424852;
  border-radius: 6px;
  background: #24282e;
  color: #fff;
  box-shadow: 0 8px 28px #0005;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color-scheme: dark;
}
#project-details[hidden] { display: none; }
#project-details .project-details-header {
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #424852;
  background: #292e35;
}
#project-details .project-details-header > span { min-width: 0; }
#project-details h2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 0 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#project-details .project-type-badge {
  display: inline-flex;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--project-type-color) 55%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--project-type-color) 12%, #24282e);
  color: var(--project-type-color);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
}
#project-details [data-project-identifier] {
  display: block;
  margin-top: 5px;
  color: #bac1cb;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
#project-details [hidden] { display: none; }
#project-details .project-details-close {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid #535b67;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
#project-details .project-details-close:hover { background: #414852; }

/* Independent scroll area, dense label/value rows and clear section boundaries. */
#project-details .project-details-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #626b78 #24282e;
  padding: 0 12px 12px;
}
#project-details :focus-visible { outline: 2px solid #aab8cc; outline-offset: -2px; }
#project-details .project-info-section { padding: 12px 0; border-bottom: 1px solid #3d434c; }
#project-details h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px;
  color: #edf0f5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
#project-details .project-detail-list {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
}
#project-details .project-detail-list dt { color: #b9c0ca; font-size: inherit; font-weight: 400; }
#project-details .project-detail-list dd { margin: 0; color: #fff; font-size: inherit; font-weight: 450; overflow-wrap: anywhere; }

/* Adjacent stage colors blend from node center to node center; future progress stays muted. */
#project-details .project-lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 4px 0 0; list-style: none; }
#project-details .project-lifecycle li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; color: #8f98a6; }
#project-details .project-lifecycle li:not(:first-child)::before { position: absolute; top: 5px; right: 50%; width: 100%; height: 1px; background: linear-gradient(90deg, var(--project-previous-stage-color), var(--project-stage-color)); content: ""; opacity: .28; }
#project-details .project-lifecycle li[data-state="complete"]::before,
#project-details .project-lifecycle li[data-state="current"]::before { opacity: .9; }
#project-details .project-lifecycle-node { z-index: 1; width: 11px; height: 11px; border: 1px solid color-mix(in srgb, var(--project-stage-color) 55%, #24282e); border-radius: 50%; background: color-mix(in srgb, var(--project-stage-color) 10%, #24282e); }
#project-details [data-state="complete"] .project-lifecycle-node { border-color: var(--project-stage-color); background: var(--project-stage-color); }
#project-details [data-state="current"] .project-lifecycle-node { border-color: #fff; background: var(--project-stage-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-stage-color) 35%, transparent); }
#project-details .project-lifecycle li[data-state="complete"] { color: #c5cdd7; }
#project-details .project-lifecycle li[data-state="current"] { color: #fff; font-weight: 700; }
#project-details .project-lifecycle-label { margin-top: 2px; font-size: 10px; line-height: 1.35; }
#project-details .project-lifecycle-date { color: #aab3c0; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1.35; }

/* Compact chronological history, with no cards around individual values. */
#project-details .project-event-count { color: #aab3c0; font-size: 9px; font-weight: 400; }
#project-details .project-history { display: block; margin: 0 0 0 4px; padding: 0; list-style: none; }
#project-details .project-history li { position: relative; margin: 0; padding: 0 0 12px 13px; border: 0; border-left: 1px solid #525b68; border-radius: 0; background: none; }
#project-details .project-history li:last-child { padding-bottom: 0; }
#project-details .project-history li::before { position: absolute; top: 4px; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: #aab5c4; content: ""; }
#project-details .project-history strong { display: block; color: #fff; font-size: 11.5px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
#project-details .project-history span { display: block; margin-top: 3px; color: #b9c0ca; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
#project-details .project-history-more { margin-top: 10px; padding: 4px 6px; border: 1px solid #566170; border-radius: 3px; background: transparent; color: #fff; font: inherit; font-size: 11px; cursor: pointer; }
#project-details .project-history-more:hover { background: #363d47; }
#project-details .project-data-note { margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: #aab3c0; font-size: 10px; line-height: 1.5; }
#project-details .project-details-message { margin: 10px 0; padding: 0; color: #cbd2dc; font-size: 11px; line-height: 1.5; }

/* Keep touch navigation and a usable part of the map visible on smaller screens. */
@media (max-width: 44rem) {
  #project-details { top: 9.6rem; right: .65rem; width: 320px; max-width: calc(100% - 5.3rem); max-height: min(55dvh, calc(100dvh - 12rem)); }
}