/* =========================================================
   Global layout
   ========================================================= */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0 ;
  background-color: #000421;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* Three.js canvas */
canvas {
  display: block;
  position: fixed;
  inset: 0;
}

/* Label layers (CSS2D) */
#label-layer,
.label-layer,
.labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.label {
  background: transparent;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #fff;
  font-size: 13px;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.zodiac-label {
  padding: 2px 4px;
  font-size: 13px;
  opacity: 0.9;
}

.month-label {
  font-size: 11px;
  opacity: 0.8;
  color: #fff;
}

/* Utility layout helpers */
.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.muted {
  opacity: 0.85;
  font-size: 12px;
}

.hidden {
  display: none !important;
}

/* =========================================================
   Date & speed bars
   ========================================================= */

#datebar-host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
}

#speedbar-host {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 2000;
  pointer-events: none;
}

#speedbar-host > .speedbar {
  pointer-events: auto;
}

/* =========================================================
   Top-right controls
   ========================================================= */

/* Astronews icon button (simulation icon) */
#astronews-btn.icon-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2100;

  background: none;
  border: none;
  padding: 0;

  width: 70px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#astronews-btn.icon-btn img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: filter 0.2s ease, transform 0.2s ease;
}

#astronews-btn.icon-btn:hover img {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  transform: scale(1.06);
}

#astronews-btn.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.8);
  border-radius: 999px;
}

/* Optional text link under icon for Info */
#info-link-btn {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 2100;

  background: none;
  border: none;
  color: #4fb3ff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 0;
}

#info-link-btn:hover {
  color: #8fd0ff;
}

/* Fullscreen button (mobile / small screens) */
#fullscreen-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2100;
  display: none; /* JS toggles visibility */

  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  width: 40px;
  height: 40px;
  padding: 6px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

#fullscreen-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

#fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

#fullscreen-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.75);
  border-radius: 10px;
}

/* =========================================================
   Overlays (Astrobase, Astronews, Info)
   ========================================================= */

#astrobase-overlay,
#astronews-overlay,
#info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
}

/* Dark backdrops */
#astrobase-overlay,
#astronews-overlay {
  background: rgba(0, 0, 0, 0.7);
  z-index: 3000;
}

#info-overlay {
  background: rgba(0, 0, 0, 0.75);
  z-index: 3500;
}

/* Iframes */
#astrobase-frame,
#astronews-frame{
  width: 100vw;
  height: 100dvh; /* dynamic viewport height (mobile safe) */
  border: none;
  border-radius: 0;
  background: #000;
}


#info-frame {
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.85);
  background: #0b0b0b;
}

/* Close buttons for overlays */
#astrobase-close,
#astronews-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  z-index: 3100;
  transition: color 0.2s ease;
}

#astrobase-close:hover,
#astronews-close:hover {
  color: #ff5555;
}

/* =========================================================
   Screen-reader only intro (hide visually)
   ========================================================= */

.sr-intro {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */

@media (max-width: 480px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}


/* Datebar buttons (prev / edit / next) — scoped so HUD styles can't override */
#datebar-host .controls .icon-btn{
  width: 38px;
  height: 38px;
}
#datebar-host .controls .icon-btn img{
  width: 18px;
  height: 18px;
}

@media (max-width: 480px){
  #datebar-host .controls .icon-btn{
    width: 45px;
    height: 45px;
  }
  #datebar-host .controls .icon-btn img{
    width: 24px;
    height: 24px;
  }
}


#fullscreen-btn{
  position: fixed;
  top: 20px;
  right: 10px;
  z-index: 2100;
  display: none; /* JS toggles visibility */

  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  width: 40px;
  height: 40px;
  padding: 6px;
  cursor: pointer;

  align-items: center;
  justify-content: center;
}


/* ─────────────────────────────
   IFRAME OVERLAY: open/minimized
   (keeps iframe alive; no reload)
────────────────────────────── */

#astronews-overlay{
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;           /* hidden by default */
  pointer-events: none;
}

/* open = full screen panel */
#astronews-overlay.is-open{
  display: flex;
  pointer-events: auto;
}

#astronews-overlay.is-open iframe{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* minimized = small dock (still visible) */
#astronews-overlay.is-min{
  display: block;
  pointer-events: auto;
  inset: auto;
  right: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: rgba(10,12,20,.85);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* iframe continues running */
#astronews-overlay.is-min iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* optional: a tiny top bar inside minimized mode if you add buttons */
#astronews-overlay .mini-bar{
  display: none;
}

#astronews-overlay.is-min .mini-bar{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 2;
}

#astronews-overlay.is-min iframe{
  padding-top: 0; /* keep full */
}

/* --- Astronews overlay: make iframe area fill the overlay --- */
#astronews-overlay{
  /* only matters when it's visible */
  flex-direction: column;
}

/* the mini bar stays at natural height */
#astronews-overlay .mini-bar{
  flex: 0 0 auto;
}

/* pages container fills the rest */
#astronews-pages{
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* IMPORTANT in flex containers so children can size properly */
  width: 100%;
}

/* each cached iframe fills the container */
#astronews-pages iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none; /* your JS toggles block/none */
}