/* BIG EARTH — custom glass / motion layer on top of Tailwind Play CDN. */

html, body { height: 100%; }

/* Cesium full-bleed and hide default widget chrome that clashes with our HUD */
#cesium, #cesium .cesium-viewer, #cesium .cesium-widget, #cesium canvas {
  width: 100%; height: 100%; outline: none;
}
.cesium-viewer-bottom,
.cesium-viewer-toolbar,
.cesium-viewer-fullscreenContainer,
.cesium-viewer-vrContainer,
.cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer,
.cesium-widget-credits { display: none !important; }

/* Glass panels -------------------------------------------------------- */
.panel {
  background: linear-gradient(180deg, rgba(17,24,39,0.72) 0%, rgba(3,7,18,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.05) inset,
    0 20px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.2);
}

/* Rail buttons */
.rail-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width: 34px; height: 34px; border-radius: 10px;
  color: #d4d4d8;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.rail-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.rail-btn:active { transform: scale(.94); }

/* Layer list items */
.layer-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: background-color .15s ease;
}
.layer-row:hover { background: rgba(255,255,255,0.04); }
.layer-row .dot {
  width: 8px; height: 8px; border-radius: 999px;
  box-shadow: 0 0 12px 0 currentColor;
}
.layer-row .label { font-size: 12px; letter-spacing: .01em; color: #e4e4e7; font-weight: 500; }
.layer-row .meta  { font-family: "JetBrains Mono", ui-monospace, monospace;
                    font-size: 10px; color: #71717a; letter-spacing: .08em; text-transform: uppercase; }

/* iOS-style toggle */
.toggle {
  position: relative; width: 30px; height: 17px; border-radius: 999px;
  background: rgba(255,255,255,0.08); transition: background-color .2s ease;
  flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 999px; background: #e4e4e7;
  transition: transform .2s ease, background-color .2s ease;
}
.toggle.on { background: rgba(52,224,161,0.45); }
.toggle.on::after { transform: translateX(13px); background: #6ef2c2; box-shadow: 0 0 8px rgba(110,242,194,0.7); }

/* Bookmark chips */
.bookmark {
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; color: #d4d4d8; font-weight: 500;
  text-align: left; transition: all .15s ease; cursor: pointer;
}
.bookmark:hover { background: rgba(52,224,161,0.08); border-color: rgba(52,224,161,0.35); color: #fff; transform: translateY(-1px); }
.bookmark .sub { display:block; font-family: "JetBrains Mono", monospace; font-size: 9px; color: #71717a; margin-top: 2px; letter-spacing: .05em; }

/* Search results */
#searchResults .hit {
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background-color .1s ease;
}
#searchResults .hit:first-child { border-top: none; }
#searchResults .hit:hover { background: rgba(52,224,161,0.08); }
#searchResults .hit .n { font-size: 13px; color: #fafafa; font-weight: 500; }
#searchResults .hit .k { font-family: "JetBrains Mono", monospace; font-size: 10px; color: #71717a; text-transform: uppercase; letter-spacing: .1em; }

/* Boot splash globe — pure CSS, no assets */
.boot-globe {
  width: 96px; height: 96px; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at 32% 30%, #34e0a1 0%, #0ea472 28%, #064f38 60%, #020f0a 100%);
  box-shadow:
    0 0 80px 0 rgba(52,224,161,0.35),
    inset -12px -16px 40px rgba(0,0,0,0.7),
    inset 8px 10px 30px rgba(110,242,194,0.2);
  animation: spin 8s linear infinite;
}
.boot-globe::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px dashed rgba(110,242,194,0.35); animation: spin 14s linear infinite reverse;
}
.boot-globe::after {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(110,242,194,0.12);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Film-grain overlay (pure CSS) */
.grain {
  background-image:
    radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
}

/* Scrollbar tidy */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Fade helpers */
.fade-out { opacity: 0; pointer-events: none; }

/* ---- Loading task stack ---- */
#taskStack {
  display: flex; flex-direction: column; gap: 8px;
}
.task-row {
  opacity: 0; transform: translateY(-4px);
  animation: task-in .25s ease forwards;
}
@keyframes task-in { to { opacity: 1; transform: none; } }

.spinner-ring {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 242, 194, 0.18);
  border-top-color: #34e0a1;
  animation: spinner-rotate 0.75s linear infinite;
  box-shadow: 0 0 10px rgba(52, 224, 161, 0.35);
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.task-bar {
  margin-top: 6px; height: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden; position: relative;
}
.task-bar > .fill {
  height: 100%; background: linear-gradient(90deg, #34e0a1, #6ef2c2);
  box-shadow: 0 0 8px rgba(110, 242, 194, 0.55);
  transition: width .18s ease;
}
.task-bar.indeterminate > .fill {
  width: 40%;
  animation: task-indet 1.4s ease-in-out infinite;
}
@keyframes task-indet {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(120%); }
  100% { transform: translateX(260%); }
}

/* Scene metrics rows: keep a stable sub-layer so moving imagery behind
   the glass panel doesn't shimmer per row. */
.scene-row {
  background: rgba(2, 6, 18, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 4px 6px;
}

/* Range input: darker track */
input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #1f2937, #ffb347, #1f2937);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 999px;
  background: #ffd27a; margin-top: -5.5px;
  box-shadow: 0 0 12px rgba(255,179,71,0.7), 0 0 0 3px rgba(255,179,71,0.12);
  cursor: pointer;
}