/* ============================================================
   STELLARIA 3D RECONSTRUCTION
   Catalog of preloaded reconstructions (apply raster TIFF) + a
   Three.js OBJ walkthrough viewer. Token system, dark shell.
   ============================================================ */

/* ---- Catalog panel (fills the globe area) ---- */
.st-recon {
  position: absolute; inset: 0; z-index: calc(var(--z-overlay) + 5);
  background: var(--c-elev-1); color-scheme: dark;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms var(--ease-tactical), transform 160ms var(--ease-tactical), visibility 0s linear 160ms;
}
.st-recon[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms var(--ease-tactical), transform 160ms var(--ease-tactical); }
@media (prefers-reduced-motion: reduce) { .st-recon, .st-recon-3d { transition: none; transform: none; } }

.st-recon__head {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); min-height: 44px;
  border-bottom: var(--border-1) solid var(--c-border); background: var(--c-elev-2);
}
.st-recon__title { font-family: var(--f-mono); font-size: 12px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase; color: var(--c-white); margin: 0; font-weight: var(--fw-regular); }
.st-recon__sub { font-family: var(--f-mono); font-size: 11px; /* allow-raw */ color: var(--c-fg-muted); }
.st-recon__spacer { flex: 1; }
.st-recon__iconbtn { background: transparent; border: var(--border-1) solid transparent; color: var(--c-fg-dim); cursor: pointer; padding: var(--sp-0_5); display: inline-flex; border-radius: var(--r-2, 6px); }
.st-recon__iconbtn:hover { color: var(--c-white); border-color: var(--c-border); }
.st-recon__iconbtn svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }

.st-recon__grid { flex: 1; overflow: auto; padding: var(--sp-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); align-content: start; }
.st-recon__empty { grid-column: 1 / -1; text-align: center; padding: var(--sp-4); color: var(--c-fg-muted); font-family: var(--f-mono); font-size: 12px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase; }
.st-recon__card { border: var(--border-1) solid var(--c-border); background: var(--c-elev-2); display: flex; flex-direction: column; transition: border-color var(--dur-fast) var(--ease-tactical); }
.st-recon__card[aria-current="true"] { border-color: var(--c-accent); }
.st-recon__card:hover { border-color: var(--c-border-h); }
.st-recon__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-elev-1); display: block; }
.st-recon__thumb-ph { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-elev-1), var(--c-elev-3, var(--c-elev-1))); color: var(--c-fg-muted); font-family: var(--f-mono); font-size: 11px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase; }
.st-recon__body { padding: var(--sp-1) var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.st-recon__name { font-size: 14px; /* allow-raw */ color: var(--c-white); }
.st-recon__meta { font-family: var(--f-mono); font-size: 11px; /* allow-raw */ color: var(--c-fg-muted); }
.st-recon__card-actions { display: flex; gap: var(--sp-0_5); padding: 0 var(--sp-2) var(--sp-2); }
.st-recon__apply, .st-recon__view {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-0_5);
  font-family: var(--f-mono); font-size: 11px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase;
  border: var(--border-1) solid var(--c-border); border-radius: var(--r-2, 6px); padding: var(--sp-0_5) var(--sp-1); cursor: pointer;
  color: var(--c-white); background: transparent; transition: background var(--dur-fast) var(--ease-tactical), border-color var(--dur-fast) var(--ease-tactical);
}
.st-recon__apply { background: var(--c-accent); border-color: var(--c-accent); }
.st-recon__apply:hover { opacity: 0.92; }
.st-recon__view:hover { border-color: var(--c-border-h); }

/* ---- 3D walkthrough viewer ---- */
.st-recon-3d {
  position: absolute; inset: 0; z-index: calc(var(--z-overlay) + 8);
  background: #05070a;   /* allow-raw — 3D viewport backdrop */
  display: none;
}
.st-recon-3d[data-open="true"] { display: block; }
.st-recon-3d canvas { display: block; width: 100%; height: 100%; }
.st-recon-3d__bar {
  position: absolute; top: var(--sp-2); left: var(--sp-2); right: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1);
  pointer-events: none;
}
.st-recon-3d__name { pointer-events: none; font-family: var(--f-mono); font-size: 12px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase; color: var(--c-white); background: rgba(0,0,0,0.45); padding: var(--sp-0_5) var(--sp-1); }
.st-recon-3d__spacer { flex: 1; }
.st-recon-3d__close { pointer-events: auto; background: rgba(0,0,0,0.5); border: var(--border-1) solid var(--c-border); color: var(--c-white); cursor: pointer; padding: var(--sp-0_5); display: inline-flex; border-radius: var(--r-2, 6px); }
.st-recon-3d__close:hover { border-color: var(--c-border-h); }
.st-recon-3d__close svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
.st-recon-3d__speed {
  pointer-events: auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  background: rgba(0,0,0,0.5); border: var(--border-1) solid var(--c-border); padding: var(--sp-0_5) var(--sp-1);
  color: var(--c-white); font-family: var(--f-mono); font-size: 11px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase;
}
.st-recon-3d__speed input { accent-color: var(--c-accent); width: 110px; }
.st-recon-3d__hint {
  position: absolute; left: 50%; bottom: var(--sp-2); transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 12px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase;
  color: var(--c-white); background: rgba(0,0,0,0.55); border: var(--border-1) solid var(--c-border); padding: var(--sp-1) var(--sp-2); text-align: center;
}
.st-recon-3d[data-locked="true"] .st-recon-3d__hint { display: none; }
.st-recon-3d__loading {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  color: var(--c-fg-dim); font-family: var(--f-mono); font-size: 12px; /* allow-raw */ letter-spacing: var(--ls-mono-cap); text-transform: uppercase;
}
.st-recon-3d[data-loading="true"] .st-recon-3d__loading { display: flex; }