/* Shared loading progress — panel row (DataTables / floating windows) or
   canvas HUD overlay (Working Map / point-cloud viewers). */

.load-progress-host { flex: 0 0 auto; min-width: 0; }

/* ---- In-panel reserved row (tables, floating windows) ---- */
.load-progress {
  position: relative;
  min-height: 28px; /* [REASON] Compact reserved status line including the 3px track. */
  color: var(--text-secondary);
  font-size: .75rem;
  background: var(--surface-0);
}
.load-progress[data-visible="false"] > * { visibility: hidden; }
.load-progress[data-visible="false"] .load-progress__details { display: none; }
.load-progress__track {
  height: 3px; /* [REASON] Subtle hairline progress track. */
  background: var(--border-subtle);
  overflow: hidden;
}
.load-progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease);
}
.load-progress__line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 25px; /* [REASON] Fits the reserved 28px slot. */
}
.load-progress__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.load-progress__toggle,
.load-progress__retry {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 var(--space-1);
  font: inherit;
  cursor: pointer;
}
.load-progress__toggle {
  min-width: 24px;
  min-height: 24px; /* [REASON] Minimum keyboard/pointer target. */
}
.load-progress__toggle[hidden] { display: none; }
.load-progress__toggle:focus-visible,
.load-progress__retry:focus-visible { outline: 2px solid var(--border-focus); }
.load-progress__retry { text-decoration: underline; white-space: nowrap; }
.load-progress__details {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.load-progress__details[hidden] { display: none; }
.load-progress__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.load-progress[data-state="failed"] .load-progress__label { color: var(--status-error-fg); }
.load-progress[data-state="warn"] .load-progress__label { color: var(--status-warn-fg); }
.load-progress[data-state="warn"] .load-progress__bar { background: var(--warning-500); }
.load-progress[data-state="failed"] .load-progress__bar { background: var(--danger-500); }
.load-progress[data-indeterminate="true"] .load-progress__bar {
  animation: load-progress-travel 2.4s linear infinite;
}
@keyframes load-progress-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
  .load-progress__bar { transition: none; }
  .load-progress[data-indeterminate="true"] .load-progress__bar { animation: none; }
}

/* ---- Canvas HUD overlay (map / 3D viewers) ---- */
/* [REMOVAL-2365] Reserved 28px #wm-loading-progress slot + calc(100%-28px) map
   height hack removed — progress floats as a glass pill over the full map. */
.load-progress-host[data-placement="overlay"] {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(420px, calc(100% - 120px)); /* [REASON] Clear left tool rail + right layers panel. */
  z-index: var(--z-control);
  pointer-events: none;
  height: auto;
  min-height: 0;
}
.load-progress-host[data-placement="overlay"] .load-progress {
  pointer-events: auto;
  min-height: 0;
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); /* [REASON] Glass HUD matching layers panel / map-statusbar. */
  backdrop-filter: blur(10px); /* [REASON] Glass HUD matching layers panel / map-statusbar. */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--elev-1);
  overflow: hidden;
  font-size: 12px; /* [REASON] Compact HUD label size matching map chrome. */
}
.load-progress-host[data-placement="overlay"] .load-progress[data-visible="false"] {
  display: none;
}
.load-progress-host[data-placement="overlay"] .load-progress[data-visible="false"] > * {
  visibility: visible; /* [REASON] Host uses display:none when idle; no reserved gap. */
}
.load-progress-host[data-placement="overlay"] .load-progress__track {
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.load-progress-host[data-placement="overlay"] .load-progress__line {
  padding: var(--space-1) var(--space-3);
  min-height: 0;
  gap: var(--space-2);
}
.load-progress-host[data-placement="overlay"] .load-progress__details {
  border-bottom: 0;
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}
.load-progress-host[data-placement="overlay"] .load-progress[data-state="warn"] {
  border-color: var(--status-warn-bd);
  background: color-mix(in srgb, var(--status-warn-bg) 70%, var(--surface-0));
}
.load-progress-host[data-placement="overlay"] .load-progress[data-state="failed"] {
  border-color: var(--status-error-bd);
  background: color-mix(in srgb, var(--status-error-bg) 70%, var(--surface-0));
}

/* Working Map: keep the glass HUD off the centered GeoSearch bar.
   Default overlay stays top-center (styleguide, point-cloud viewers).
   TODO(user-guide): recapture Chapter B.0 Working Map chrome (search bar +
   tile progress pill) after this overlay offset. */
#wm-map-col {
  container-type: inline-size;
  container-name: wm-map;
}
#working-map:has(.leaflet-geosearch-bar) ~ #wm-loading-progress.load-progress-host[data-placement="overlay"] {
  left: calc(50% + 200px + var(--space-3)); /* [REASON] half of vendor .leaflet-geosearch-bar 400px width */
  transform: none;
  max-width: min(280px, calc(50% - 200px - var(--space-3) * 2)); /* [REASON] remaining room right of the 400px bar */
}
@container wm-map (max-width: 900px) { /* [REASON] 400px bar + pill + --space-3 no longer fit side by side */
  #working-map:has(.leaflet-geosearch-bar) ~ #wm-loading-progress.load-progress-host[data-placement="overlay"] {
    left: 50%;
    transform: translateX(-50%);
    top: calc(10px + 40px + var(--space-2)); /* [REASON] vendor 10px bar margin + ~40px input + gap */
    max-width: min(420px, calc(100% - 120px)); /* [REASON] restore default overlay cap when stacked */
  }
}

/* Canvas hosts (#wm-loading-progress, #wm-pc-loading-progress,
   #pc-loading-progress) use data-placement=overlay — no reserved height. */