/*!
 * Live Starlink Satellite Tracker - page styles
 * Loaded only on /starlink-tracker/.
 *
 * Uses the same design tokens as the rest of the site, so the page belongs to
 * the WiFi tools site rather than looking like a separate space-themed product.
 * Only the globe itself gets the dark dashboard treatment.
 */

:root {
  --starlink-dot: #80d0c7;
  --starlink-selected: #ffb020;
  --starlink-orbit-past: #7f9bb0;
  --starlink-sky: #05121c;
  --starlink-panel: rgba(8, 30, 44, .84);
  --starlink-panel-line: rgba(128, 208, 199, .28);
  --starlink-panel-ink: #eefaf8;
  --starlink-live: #34d399;
}

:root[data-theme="dark"] {
  --starlink-sky: #020a12;
  --starlink-panel: rgba(4, 18, 28, .88);
}

/* ------------------------------------------------------------------ globe */

.starlink-globe {
  position: relative;
  border-radius: var(--wst-radius);
  overflow: hidden;
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
  background: var(--starlink-sky);
  /* Reserved before Cesium initialises so the globe cannot shift the page. */
  height: clamp(400px, 66vh, 720px);
}
.starlink-globe__canvas { position: absolute; inset: 0; }
.starlink-globe__canvas .cesium-widget,
.starlink-globe__canvas .cesium-widget canvas { width: 100%; height: 100%; }

/* Cesium ships its own chrome; keep it on this site's palette. */
.cesium-viewer-toolbar,
.cesium-viewer-bottom { display: none; }
.starlink-credit {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  z-index: 2;
  font-size: .68rem;
  color: rgba(238, 250, 248, .72);
  pointer-events: none;
}
.starlink-credit a { color: rgba(238, 250, 248, .9); }

.starlink-overlay {
  position: absolute;
  z-index: 3;
  left: 1rem;
  top: 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.starlink-overlay .btn {
  --bs-btn-bg: var(--starlink-panel);
  --bs-btn-border-color: var(--starlink-panel-line);
  --bs-btn-color: var(--starlink-panel-ink);
  --bs-btn-hover-bg: rgba(19, 84, 122, .92);
  --bs-btn-hover-border-color: var(--starlink-panel-line);
  --bs-btn-hover-color: #fff;
  backdrop-filter: blur(8px);
}

.starlink-notice {
  position: absolute;
  inset: 50% 1rem auto;
  transform: translateY(-50%);
  z-index: 4;
  margin: 0 auto;
  max-width: 34rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: var(--wst-surface);
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
  text-align: center;
}

.starlink-stage {
  position: absolute;
  inset: auto 0 1rem;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: .85rem;
  color: var(--starlink-panel-ink);
}

/* -------------------------------------------------------------- live bar */

.live-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}
.live-card {
  border: 1px solid var(--wst-line);
  border-radius: var(--wst-radius-sm);
  background: linear-gradient(180deg, var(--wst-surface-2), var(--wst-bg-soft));
  padding: .8rem 1rem;
}
.live-card__label {
  margin: 0 0 .3rem;
  font-family: var(--wst-font-title);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wst-muted);
}
.live-card__value {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wst-ink);
  line-height: 1.2;
  word-break: break-word;
}
.live-card__value--sm { font-size: 1rem; }

/* The pulsing "live" dot. Static for anyone who asked for reduced motion. */
.live-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--starlink-live);
  margin-right: .4rem;
  animation: starlink-pulse 2s ease-in-out infinite;
}
@keyframes starlink-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* ----------------------------------------------------------------- search */

.starlink-search { position: relative; }
.starlink-search__panel {
  position: absolute;
  z-index: 1100;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: min(55vh, 22rem);
  overflow-y: auto;
  padding: .5rem;
  border-radius: var(--wst-radius-sm);
  background: var(--wst-surface);
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
}
.starlink-search__list { list-style: none; margin: 0; padding: 0; }
.starlink-search__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: .45rem .6rem;
  cursor: pointer;
}
.starlink-search__item:hover,
.starlink-search__item:focus-visible { background: var(--wst-blue-soft); }
.starlink-search__name { font-weight: 600; color: var(--wst-ink); }
.starlink-search__meta { font-size: .78rem; color: var(--wst-muted); font-variant-numeric: tabular-nums; }
.starlink-search__empty { padding: .7rem .6rem; color: var(--wst-muted); }

/* ---------------------------------------------------------------- panels */

.starlink-panel {
  border: 1px solid var(--wst-line);
  border-radius: var(--wst-radius);
  background: var(--wst-surface);
  box-shadow: var(--wst-shadow-sm);
  padding: 1.25rem 1.35rem;
}
.starlink-panel + .starlink-panel { margin-top: 1.25rem; }

.starlink-panel .detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1.5rem;
}
.starlink-panel .detail-list dt {
  font-family: var(--wst-font-title);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wst-muted);
  margin-top: .85rem;
}
.starlink-panel .detail-list dd {
  margin: .15rem 0 0;
  font-weight: 600;
  color: var(--wst-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.table-scroll { overflow-x: auto; }
.directory-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 767.98px) {
  .starlink-globe { height: clamp(340px, 56vh, 460px); }
  .starlink-overlay { left: .6rem; top: .6rem; gap: .4rem; }
  .starlink-overlay .btn { padding: .3rem .6rem; font-size: .8rem; }
}