/* Copyright (C)2022-2026 by John A Kline (john@johnkline.com)
 * Distributed under the terms of the GNU Public License (GPLv3)
 *
 * Stylesheet for the Celestial live report.  ALL colors live here: Cheetah
 * owns '#' in the .tmpl/.inc files, so hex literals must never appear there
 * -- the javascript reaches every color through a class in this file (the
 * SVG marks through the per-body fill- and stroke- classes).
 * The palette and type system are ported from the weewx-skyfield "Sky"
 * page (same author), so the two pages read as one family. */

:root{
  --night:#0A0F22;   /* page background */
  --vault:#111834;   /* cards and chips */
  --ink:#E9E4D4;     /* primary text */
  --muted:#8B93B8;   /* secondary text */
  --brass:#D3A94C;   /* accent */
  --line:#2A3358;    /* borders, hairlines */
  /* Per-body identity colors (weewx-skyfield 1.5's night-plate values --
   * the traditional astronomy scheme: yellow sun, silver moon, gray
   * Mercury, pearly Venus; pluto is celestial's own addition -- the Sky
   * palette has no night pluto).  Earth (the dial's center) and Proxima
   * (silver, like the stars) are celestial's own as well. */
  --c-sun:#FFD75E; --c-moon:#C9D0DA; --c-mercury:#9CA0AC; --c-venus:#F0E3BE;
  --c-mars:#C04F36; --c-jupiter:#D89A56; --c-saturn:#AC8F3E;
  --c-uranus:#35A8BE; --c-neptune:#5F85E6; --c-pluto:#8A7FB0;
  --c-earth:#7FB4A2;
  color-scheme: dark;
}
*{box-sizing:border-box}
body{background:var(--night); color:var(--ink);
     font-family:Charter, Georgia, 'Times New Roman', serif;
     margin:0; padding:32px 20px 40px; line-height:1.55}
.page{max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:30px}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

/* Header */
header{display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
       flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px}
h1{font-family:Georgia,'Times New Roman',serif; font-variant-caps:small-caps;
   letter-spacing:.16em; font-weight:400; font-size:clamp(1.6rem,4vw,2.4rem);
   margin:0; color:var(--ink); text-wrap:balance}
h1 .over{color:var(--brass)}
.sub{color:var(--muted); margin-top:6px; font-size:.95rem}
#live-label{color:var(--brass); font-variant-caps:small-caps; letter-spacing:.1em}

/* Cards */
section{background:var(--vault); border:1px solid var(--line); padding:20px 22px 16px}
.eyebrow{font-variant-caps:small-caps; letter-spacing:.22em; color:var(--brass); font-weight:400;
         font-size:.85rem; margin:0 0 4px}
.caption{color:var(--muted); font-size:.85rem; margin:10px 0 0; max-width:68ch}
.dialcaption{text-align:center; max-width:none}

/* The Geocentric: the dial beside its roster; one column below 1000px. */
.geo-body{display:grid; grid-template-columns:minmax(0,1fr) 430px;
          gap:26px; align-items:center; margin-top:8px}
@media (max-width: 1000px){
  .geo-body{display:flex; flex-direction:column; align-items:stretch}
}
#dial{width:100%; max-width:640px; display:block; margin:0 auto}

/* The roster: one row per body -- name chip, the distance odometer, then
 * rate / raw AU / altitude on the sub-line. */
.roster{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:7.2rem 1fr; gap:.1rem .6rem;
     padding:.42rem 0 .38rem; border-bottom:1px solid var(--line);
     align-items:baseline}
.bname{font-variant-caps:small-caps; letter-spacing:.1em; white-space:nowrap}
.bname .chip{display:inline-block; width:.62em; height:.62em; border-radius:50%;
             margin-right:.5em}
.row.below .bname, .row.below .odo{opacity:.55}
.odo{text-align:right; font-size:.9rem; letter-spacing:.02em}
.odo .unit{color:var(--muted); font-size:.78rem}
.rsub{grid-column:1 / -1; display:flex; justify-content:space-between; gap:.45rem;
      color:var(--muted); font-size:.75rem; flex-wrap:wrap}
.rsub .arr{color:var(--brass)}
/* The odometer flash: freshly changed digits ease from brass to ink. */
.chg{animation:chgflash .9s ease-out}
@keyframes chgflash{from{color:var(--brass)}}
@media (prefers-reduced-motion: reduce){
  .chg{animation:none}
}

/* Per-body identity classes: the roster chips and the SVG marks.  Proxima
 * wears the moon's silver, like the stars on the Sky page. */
.chip-sun{background:var(--c-sun)} .chip-moon{background:var(--c-moon)}
.chip-mercury{background:var(--c-mercury)} .chip-venus{background:var(--c-venus)}
.chip-mars{background:var(--c-mars)} .chip-jupiter{background:var(--c-jupiter)}
.chip-saturn{background:var(--c-saturn)} .chip-uranus{background:var(--c-uranus)}
.chip-neptune{background:var(--c-neptune)} .chip-pluto{background:var(--c-pluto)}
.chip-proxima_centauri{background:var(--c-moon)}
.fill-sun{fill:var(--c-sun)} .fill-moon{fill:var(--c-moon)}
.fill-mercury{fill:var(--c-mercury)} .fill-venus{fill:var(--c-venus)}
.fill-mars{fill:var(--c-mars)} .fill-jupiter{fill:var(--c-jupiter)}
.fill-saturn{fill:var(--c-saturn)} .fill-uranus{fill:var(--c-uranus)}
.fill-neptune{fill:var(--c-neptune)} .fill-pluto{fill:var(--c-pluto)}
.fill-proxima_centauri{fill:var(--c-moon)}
.fill-earth{fill:var(--c-earth)}
.stroke-sun{stroke:var(--c-sun)} .stroke-moon{stroke:var(--c-moon)}
.stroke-mercury{stroke:var(--c-mercury)} .stroke-venus{stroke:var(--c-venus)}
.stroke-mars{stroke:var(--c-mars)} .stroke-jupiter{stroke:var(--c-jupiter)}
.stroke-saturn{stroke:var(--c-saturn)} .stroke-uranus{stroke:var(--c-uranus)}
.stroke-neptune{stroke:var(--c-neptune)} .stroke-pluto{stroke:var(--c-pluto)}
.stroke-proxima_centauri{stroke:var(--c-moon)}

/* The dial's static furniture. */
.geo-ring{fill:none; stroke:var(--line)}
.geo-rim{fill:none; stroke:var(--line); stroke-width:1.4}
.geo-tick{stroke:var(--line); stroke-width:1}
.geo-tick-major{stroke-width:1.6}
.geo-earth{stroke:var(--night); stroke-width:1}
/* Body dots: above the horizon they wear a night-colored ring; below they
 * dim and their outline goes dashed in their own color. */
.geodot.ring{stroke:var(--night); stroke-width:1}
.geodot.below{fill-opacity:.35; stroke-width:1; stroke-dasharray:2.5 2.5}
.sunglow{filter:blur(6px); opacity:.55}
/* The moon's true-phase disc, silver-rimmed so a new moon never vanishes. */
.moon-dark{fill:#1E2745}
.moon-lit{fill:#DDD8C4}
.moon-rim{fill:none; stroke:var(--c-moon); stroke-opacity:.55; stroke-width:1}
.geomoon.below{opacity:.45}
.geomoon.below .moon-rim{stroke-dasharray:2.5 2.5}
/* Motion trails: per-segment opacity is set by the javascript. */
.trail{stroke-width:1.5; stroke-linecap:round}

/* SVG typography.  cardinal/bodylab/gridlab keep the same names and values
 * as weewx-skyfield's sky.css, so the two pages read as one family. */
svg{width:100%; height:auto; display:block}
svg text{fill:var(--ink); font-family:Charter, Georgia, serif}
.cardinal{font-size:14px; fill:var(--brass); letter-spacing:.1em}
.bodylab{font-size:11px; fill:var(--ink); font-family:Georgia, serif}
.bodylab.dim{opacity:.55}
.gridlab{font-size:10px; fill:var(--muted)}
.earthlab{font-size:11px; fill:var(--c-earth); font-variant-caps:small-caps;
          letter-spacing:.12em; text-anchor:middle}

/* Shown in the panel when no extended almanac serves the report. */
.skyhint{color:var(--muted); font-style:italic; text-align:center;
         border:1px dashed var(--line); padding:38px 20px; margin:8px 0 6px}
.skyhint a{color:var(--brass)}

footer{color:var(--muted); font-size:.82rem; border-top:1px solid var(--line);
       padding-top:16px; text-align:center; font-style:italic}