/* nightsky.css -- page-only styles for night_sky.html (Task 12).
   Shared look comes from neon-mesa.css; this file adds the star layer, the
   52-week table wrapper and the planets card. No frameworks. */

/* ---------- star layer: fixed field of radial-gradient dots behind the page ---------- */
#starfield{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:#020b14;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 33% 42%,#9fb3c8 50%,transparent 100%),
    radial-gradient(2px 2px at 57% 9%,#00f2ff 50%,transparent 100%),
    radial-gradient(1px 1px at 71% 63%,#fff 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 31%,#ffd166 50%,transparent 100%),
    radial-gradient(1px 1px at 22% 77%,#fff 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 86%,#9fb3c8 50%,transparent 100%),
    radial-gradient(1px 1px at 63% 48%,#fff 50%,transparent 100%),
    radial-gradient(2px 2px at 81% 92%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 5% 55%,#ffd166 50%,transparent 100%),
    radial-gradient(1px 1px at 95% 72%,#fff 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 27%,#fff 50%,transparent 100%);
  background-size:420px 380px;
  background-repeat:repeat;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){#starfield{animation:none;opacity:.85}}

/* the page background must be transparent so the stars show through;
   html keeps the navy so nothing ever flashes white */
html{background:#020b14}
body.night{background:transparent}

/* ---------- back link ---------- */
.back{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 0;
  font-size:18px;color:#ff9e3d;
}

/* ---------- cards on this page: labels readable at 16 px ---------- */
.night .card .lbl{font-size:16px;opacity:1;color:var(--muted)}

/* ---------- this-week highlight ---------- */
.highlight{margin:12px 0}
.highlight .big{font-size:26px;color:#00f2ff}
.highlight .sub{color:#ffd166;opacity:1}
.site-note{color:var(--muted);margin:0 0 12px}

/* ---------- 52-week table: scrolls inside the wrap, never the page ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:12px 0 0}
table.sky-table{border-collapse:collapse;width:100%;min-width:560px;font-size:18px}
.sky-table th{
  font:700 16px 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#39ff14;text-align:left;padding:10px 8px;border-bottom:2px solid var(--accent);
  white-space:nowrap;
}
.sky-table td{padding:10px 8px;border-bottom:1px solid var(--accent-glow);vertical-align:top}
.sky-table td.wk{text-align:right;white-space:nowrap;color:var(--muted)}
.sky-table td.dates{white-space:nowrap;color:var(--muted)}
.sky-table td.constellation{color:#00f2ff;font-weight:600;white-space:nowrap}
.sky-table td.notable{color:#ffd166}
.sky-table tr.season td{
  font:700 16px 'Orbitron',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#39ff14;text-align:center;background:rgba(0,242,255,.08);padding:12px 8px;
}
.sky-table tr.now{background:rgba(0,242,255,.16);box-shadow:inset 3px 0 0 #00f2ff}
.sky-table tr.now td{color:#fff;font-weight:600}
.sky-table tr.now td.wk{color:#00f2ff}

/* ---------- planets card ---------- */
.planets{margin:12px 0 0}
.planets .m{align-items:center}
.planets .k{font-size:18px;opacity:1}
.planets .v{white-space:normal;font-size:18px}
.planets .evening-west .v{color:#39ff14}
.planets .morning-east .v{color:#ffd166}
.planets .not-visible .v{color:var(--muted)}
.planets-date{color:var(--muted);margin:10px 0 0;font-size:18px}
.swipe-note{color:var(--muted);margin:8px 0 0;font-size:18px}

/* ---------- tips: three lists, one column on phones ---------- */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tips ul{margin:0;padding-left:1.2em}
.tips li{margin:4px 0}
@media (max-width:700px){
  .tips{grid-template-columns:1fr}
  .sky-table td,.sky-table th{padding:8px 6px}
}