/*
 * Styles for the 3D scene and the impact theatre.
 * Component styles only. Colours come from the same --ssv-* custom properties
 * as views.css (load views.css first, or define the properties yourself); the
 * theatre adds a few --thv-* tokens of its own.
 */

:root {
  --thv-panel: rgba(12, 16, 24, 0.82);
  --thv-panel-solid: #121722;
  --thv-border: #2b3648;
  --thv-hot: #ffb070;
  --thv-core: #a03020;
  --thv-mantle: #a8b0ba;
  --thv-water: #3078e8;
  --thv-radius: 5px;
}

/* ---- scene ------------------------------------------------------- */

.ssv-scene3d { position: relative; overflow: hidden; background: var(--ssv-bg); }
.ssv-scene3d-canvas { display: block; cursor: grab; touch-action: none; }
.ssv-scene3d-canvas:active { cursor: grabbing; }
.ssv-scene3d-canvas:focus-visible { outline: 1px solid var(--ssv-accent); outline-offset: -1px; }

/* ---- WebGL2 backend ----------------------------------------------
 * Three stacked canvases: the 2-D background (flat fill, stars, grid), the GL canvas, and the
 * existing 2-D canvas — which keeps the pointer events and all the text — now on top and
 * transparent.  Only the top one is in normal flow, so it is still what gives the container its
 * height; the other two are pulled out over it. */
.ssv-scene3d-bg,
.ssv-scene3d-gl {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.ssv-scene3d-bg { z-index: 0; }
.ssv-scene3d-gl { z-index: 1; }
.ssv-scene3d.ssv-gl-active > .ssv-scene3d-canvas {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* The renderer indicator and the permanent honesty caption. */
.ssv-gl-note {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 3;
  max-width: min(58ch, calc(100% - 120px));
  display: flex;
  align-items: baseline;
  gap: 6px;
  pointer-events: none;
  font: var(--ssv-font-small, 10px/1.35 system-ui, sans-serif);
  color: var(--ssv-dim, #7b8798);
}
.ssv-gl-badge {
  flex: none;
  padding: 0 4px;
  border: 1px solid var(--thv-border);
  border-radius: 3px;
  background: var(--thv-panel);
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.ssv-gl-caption { opacity: 0.62; }
.ssv-gl-note:not(.ssv-gl-on) .ssv-gl-caption { display: none; }

/* ---- theatre overlay --------------------------------------------- */

.thv-root { position: relative; overflow: hidden; }

.thv-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: var(--ssv-font);
  color: var(--ssv-fg);
  z-index: 2;
}

.thv-hidden { display: none !important; }

.thv-caption {
  position: absolute;
  top: 8px;
  left: 10px;
  max-width: min(46%, 430px);
}

.thv-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px #000;
}

.thv-sub {
  color: var(--ssv-dim);
  font: var(--ssv-font-small);
  margin-top: 1px;
  text-shadow: 0 1px 3px #000;
}

.thv-note {
  margin-top: 5px;
  color: var(--ssv-faint);
  font: var(--ssv-font-small);
  line-height: 1.35;
  background: var(--thv-panel);
  border-left: 2px solid var(--thv-border);
  padding: 3px 6px;
  border-radius: 0 3px 3px 0;
}

.thv-note.thv-warn { color: var(--ssv-warn); border-left-color: var(--ssv-warn); }

/* Fidelity caveats, stacked under the disclaimer they qualify rather than centred over it. */
.thv-caveat {
  margin-top: 3px;
  font: var(--ssv-font-small);
  line-height: 1.35;
  background: var(--thv-panel);
  border-left: 2px solid var(--ssv-warn);
  color: var(--ssv-warn);
  padding: 3px 6px;
  border-radius: 0 3px 3px 0;
}
.thv-caveat:empty { display: none; }

.thv-readout {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px #000;
}

.thv-rtime {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.thv-rrow {
  font: var(--ssv-font-small);
  color: var(--ssv-dim);
  line-height: 1.45;
}

.thv-rrow.thv-warn { color: var(--ssv-warn); }

/* ---- outcome panel ----------------------------------------------- */

.thv-outcome {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 268px;
  max-height: calc(100% - 96px);
  overflow-y: auto;
  pointer-events: auto;
  background: var(--thv-panel);
  border: 1px solid var(--thv-border);
  border-radius: var(--thv-radius);
  padding: 7px 9px;
  font: var(--ssv-font-small);
  backdrop-filter: blur(2px);
}

.thv-outcome-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.thv-orow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.thv-okey { color: var(--ssv-faint); white-space: nowrap; }
.thv-oval { color: var(--ssv-fg); text-align: right; font-variant-numeric: tabular-nums; }

.thv-compbar-wrap { margin: 4px 0 2px; }

.thv-compbar {
  display: flex;
  height: 9px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--thv-border);
}

.thv-seg { height: 100%; }
.thv-core { background: var(--thv-core); }
.thv-mantle { background: var(--thv-mantle); }
.thv-water { background: var(--thv-water); }

.thv-complabel { color: var(--ssv-faint); font-size: 10px; }

/* ---- control bar -------------------------------------------------- */

.thv-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  background: var(--thv-panel);
  border: 1px solid var(--thv-border);
  border-radius: var(--thv-radius);
  padding: 6px 8px;
}

.thv-btn,
.thv-controls select {
  background: var(--thv-panel-solid);
  color: var(--ssv-fg);
  border: 1px solid var(--thv-border);
  border-radius: 3px;
  font: var(--ssv-font-small);
  padding: 3px 7px;
  cursor: pointer;
}

.thv-btn:hover,
.thv-controls select:hover { border-color: var(--ssv-accent); }

.thv-play { min-width: 32px; font-size: 11px; }
.thv-exit { margin-left: auto; }

.thv-scrub {
  flex: 1 1 auto;
  min-width: 80px;
  accent-color: var(--ssv-accent);
  cursor: pointer;
}

@media (max-width: 720px) {
  .thv-outcome { width: 200px; font-size: 9px; }
  .thv-controls { flex-wrap: wrap; }
}

/* ---- SPH panel ---------------------------------------------------- *
 * Lives under the computed-outcome panel in the right-hand column, so the two opinions about the
 * same collision are read one above the other rather than side by side across the whole view.   */
.sph-panel {
  position: absolute;
  right: 10px;
  bottom: 46px;
  width: 268px;
  max-height: calc(100% - 320px);
  overflow-y: auto;
  pointer-events: auto;
  background: var(--thv-panel);
  border: 1px solid var(--thv-border);
  border-radius: var(--thv-radius);
  padding: 7px 9px;
  font: var(--ssv-font-small);
  line-height: 1.4;
}
.sph-hidden { display: none !important; }

.sph-go {
  display: block;
  width: 100%;
  padding: 7px 8px;
  font: var(--ssv-font-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0b0f18;
  background: linear-gradient(#ffd79a, #f0a85a);
  border: 1px solid #ffd79a;
  border-radius: 3px;
  cursor: pointer;
}
.sph-go:hover { filter: brightness(1.1); }
.sph-quality { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.sph-quality label { color: var(--ssv-dim); }
.sph-quality select { flex: 1; min-width: 0; font: var(--ssv-font-small); }
.sph-qnote { margin: 4px 0 0; color: var(--ssv-faint); }

.sph-phase { display: flex; justify-content: space-between; gap: 6px; }
.sph-phase-label { font-weight: 600; }
.sph-phase-steps { color: var(--ssv-faint); font-variant-numeric: tabular-nums; }
.sph-bar {
  height: 5px; margin: 5px 0; border-radius: 3px;
  background: rgba(255, 255, 255, 0.09); overflow: hidden;
}
.sph-bar-fill { height: 100%; background: linear-gradient(90deg, #7fb0ff, #ffd79a); transition: width 0.2s; }
.sph-phase-help { margin: 0; color: var(--ssv-faint); }
.sph-ctl { display: flex; gap: 5px; margin-top: 6px; }
.sph-btn {
  font: var(--ssv-font-small); padding: 3px 8px; cursor: pointer;
  color: var(--ssv-fg); background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--thv-border); border-radius: 3px;
}
.sph-btn:disabled { opacity: 0.45; cursor: default; }

.sph-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 6px; }
.sph-key { color: var(--ssv-dim); margin-right: 2px; }
.sph-seg {
  font: var(--ssv-font-small); padding: 2px 5px; cursor: pointer;
  color: var(--ssv-dim); background: transparent;
  border: 1px solid var(--thv-border); border-radius: 3px;
}
.sph-seg.on { color: #0b0f18; background: #9fc2ff; border-color: #9fc2ff; font-weight: 600; }
.sph-cut { color: var(--ssv-dim); display: inline-flex; align-items: center; gap: 3px; }
.sph-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: var(--ssv-faint); }
.sph-lg { display: inline-flex; align-items: center; gap: 3px; }
.sph-lg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sph-lg-note { color: var(--ssv-faint); font-style: italic; }

.sph-timeline { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.sph-scrub { flex: 1; min-width: 0; }
.sph-tl-time { color: var(--ssv-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sph-compare { margin-top: 8px; border-top: 1px solid var(--thv-border); padding-top: 7px; }
.sph-ctitle { font-weight: 700; letter-spacing: 0.06em; color: #9fc2ff; margin-bottom: 5px; }
.sph-ctable { width: 100%; border-collapse: collapse; font: var(--ssv-font-small); }
.sph-ctable th, .sph-ctable td { text-align: left; padding: 2px 3px; vertical-align: top; }
.sph-ctable thead th { color: var(--ssv-dim); font-weight: 600; border-bottom: 1px solid var(--thv-border); }
.sph-ctable tbody th { color: var(--ssv-dim); font-weight: 400; }
.sph-col-nb { color: #cbd6e8; }
.sph-col-sph { color: #ffd79a; }
.sph-ctable tr.sph-diff { background: rgba(159, 194, 255, 0.11); }
.sph-caption {
  margin: 7px 0 0; padding: 5px 6px; color: var(--ssv-dim);
  background: rgba(255, 255, 255, 0.04); border-left: 2px solid #9fc2ff; border-radius: 0 3px 3px 0;
}
.sph-caveats { margin: 6px 0 0; padding-left: 15px; color: var(--ssv-faint); }
.sph-caveats li { margin-bottom: 3px; }
.sph-caveats.sph-warn { color: var(--ssv-warn); list-style: none; padding-left: 0; }
.sph-limits { margin-top: 7px; }
.sph-limits > summary { cursor: pointer; color: var(--ssv-dim); }
.sph-limit-list { margin: 5px 0 0; padding-left: 16px; color: var(--ssv-faint); }
.sph-limit-list li { margin-bottom: 4px; }

@media (max-width: 1100px) {
  .sph-panel { width: 200px; font-size: 9px; max-height: calc(100% - 260px); }
}