/* Copyright 2026 by John A Kline
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 *
 * Stylesheet for the celestial pages (Today/Sun/Moon/Planets/Stars).
 * ALL celestial colors live here: Cheetah owns '#' in the .tmpl/.inc files,
 * so hex literals must never appear there -- templates and updater JS reach
 * every color through a class in this file.
 *
 * The chart palette matches weewx-skyfield 1.1's PALETTES['light'] (the
 * $sky_page SVGs are generated server-side with palette='light'; the JS-drawn
 * charts here -- moon disc, day strip -- use these classes to render in the
 * same palette).  Approved 2026-07-06; see design/celestial-brief.md.
 *
 * Everything is scoped under .cpanel and sized in em so the smartphone shell
 * scales the whole panel with the single .cpanel-sp override at the bottom.
 */

.cpanel{padding:26px 20px 34px;margin-top:18px;font-size:16px;color:#222222}
.cpanel .cwrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.cpanel .mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* header */
.cpanel .chead{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
               flex-wrap:wrap;border-bottom:1px solid #c2c8ce;padding-bottom:20px}
.cpanel h2.ctitle{margin:0;font-size:2.1em;font-weight:600;color:#367ba3;letter-spacing:.02em}
.cpanel h2.ctitle .over{color:#5c6672;font-weight:400}
.cpanel .sub{color:#5c6672;margin-top:6px;font-size:.95em}
.cpanel #live-label{color:#367ba3;font-weight:600;letter-spacing:.08em}
.cpanel .moonbox{display:flex;align-items:center;gap:14px;margin-left:auto}
.cpanel .moonbox .mlabel{text-align:right}
.cpanel .moonbox .mname{font-weight:600;font-size:1.1em}
.cpanel .moonbox .mpct{color:#5c6672;font-size:.85em}
.cpanel #moon-disc{width:5.25em;height:5.25em;flex:none}
.cpanel #big-disc{width:10.5em;flex:none}

/* cards */
.cpanel section{background:#ffffff;border:1px solid #999999;padding:18px 20px 14px}
.cpanel .eyebrow{color:#367ba3;font-weight:600;font-size:.8em;letter-spacing:.08em;
                 text-transform:uppercase;margin:0 0 10px}
.cpanel .caption{color:#5c6672;font-size:.85em;margin:10px 0 0;max-width:70ch}
.cpanel .maingrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
                  gap:26px;align-items:start}
.cpanel .colstack{display:flex;flex-direction:column;gap:26px;min-width:0}
.cpanel .cfoot{color:#5c6672;font-size:.82em;border-top:1px solid #c2c8ce;
               padding-top:14px;text-align:center;font-style:italic}

/* label/value tables (first-painted by $almanac, live via loop data) */
.cpanel table.celestial{border-collapse:collapse;width:100%;font-size:.9em}
.cpanel .label{color:#5c6672;text-align:right;padding:4px 10px 4px 0;
               white-space:nowrap;vertical-align:top;font-size:inherit}
.cpanel .data{font-family:ui-monospace,Menlo,Consolas,monospace;
              font-variant-numeric:tabular-nums;text-align:left;padding:4px 0;
              vertical-align:top;font-size:inherit}
.cpanel .datanote{color:#5c6672;font-family:inherit}

/* row tables (star lists, month rise/set) */
.cpanel table.rows{border-collapse:collapse;width:100%;font-size:.85em}
.cpanel table.rows th{color:#5c6672;font-weight:600;text-align:right;padding:6px 8px;
                      border-bottom:1px solid #367ba3;text-transform:uppercase;
                      font-size:.82em;letter-spacing:.06em}
.cpanel table.rows th:first-child{text-align:left}
.cpanel table.rows td{padding:5px 8px;text-align:right;border-bottom:1px solid #e2e5e9;
                      font-family:ui-monospace,Menlo,Consolas,monospace;
                      font-variant-numeric:tabular-nums}
.cpanel table.rows td.tname{text-align:left;font-family:inherit;font-weight:600}
.cpanel table.rows td.tnote{text-align:center;color:#5c6672;font-family:inherit}

/* glance tiles */
.cpanel .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.cpanel .tile{border:1px solid #c2c8ce;border-left:4px solid #5c6672;
              background:#fbfbfb;padding:10px 12px}
.cpanel .tile.t-sun{border-left-color:#B8860B}
.cpanel .tile.t-moon{border-left-color:#4A5FB8}
.cpanel .tile .k{color:#5c6672;font-size:.7em;letter-spacing:.05em;text-transform:uppercase}
.cpanel .tile .v{font-size:1.35em;margin:2px 0}
.cpanel .tile .s{color:#5c6672;font-size:.78em}

/* countdown chips */
.cpanel .countdown{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cpanel .count{border:1px solid #c2c8ce;background:#ffffff;padding:7px 12px;
               display:flex;gap:8px;align-items:baseline}
.cpanel .count .k{color:#5c6672;font-size:.7em;text-transform:uppercase;letter-spacing:.04em}
.cpanel .count .v{font-size:.9em}
.cpanel .count .d{color:#367ba3;font-size:.8em}

/* planet chips (hub) and planet cards (Planets page) */
.cpanel .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.cpanel .chip{display:flex;gap:10px;align-items:flex-start;
              border-bottom:1px solid #e2e5e9;padding:7px 2px}
.cpanel .chipname{font-weight:600}
.cpanel .chipline{font-size:.85em}
.cpanel .chipsub{font-size:.78em;color:#5c6672}
.cpanel .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cpanel .pcard{border:1px solid #c2c8ce;background:#fbfbfb;padding:10px 12px}
.cpanel .pcard .phead{display:flex;gap:8px;align-items:center;font-weight:600;margin-bottom:4px}
.cpanel .pcard .pline{font-size:.85em}
.cpanel .pcard .psub{font-size:.78em;color:#5c6672}
.cpanel .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;margin-top:0}
.cpanel .dot-sun{background:#B8860B} .cpanel .dot-moon{background:#4A5FB8}
.cpanel .dot-mercury{background:#8a5a24} .cpanel .dot-venus{background:#a8862c}
.cpanel .dot-mars{background:#b23a24} .cpanel .dot-jupiter{background:#b06f2e}
.cpanel .dot-saturn{background:#8f7524} .cpanel .dot-uranus{background:#20808f}
.cpanel .dot-neptune{background:#3a63c4} .cpanel .dot-pluto{background:#6a5f96}

/* phase calendar (Moon page; grid emitted by the template) */
.cpanel .phasecal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cpanel .phasecal .dow{color:#5c6672;font-size:.7em;text-transform:uppercase}
.cpanel .phasecal .day{padding:2px}
.cpanel .phasecal .day.today{outline:2px solid #B45309;outline-offset:1px}
.cpanel .phasecal .dnum{font-family:ui-monospace,Menlo,Consolas,monospace;
                        font-size:.7em;color:#5c6672}
.cpanel .phasecal .qlabel{font-size:.6em;color:#B45309;min-height:.9em}
.cpanel .phasecal .qlabel-none{font-size:.6em;color:#5c6672;min-height:.9em}

/* SVG charts (JS-drawn: moon disc, day strip; matches skyfield 'light') */
.cpanel svg{width:100%;height:auto;display:block}
.cpanel svg text{fill:#222222}
.cpanel .gridlab{font-size:10px;fill:#5c6672}
.cpanel .nowlab{font-size:10px;fill:#B45309}
.cpanel .cardinal{font-size:14px;fill:#B45309;letter-spacing:.1em}
.cpanel .starlab{font-size:10px;fill:#5c6672;font-style:italic}
.cpanel .bodylab{font-size:11px;fill:#222222}
.cpanel .rowlab{font-size:12px;fill:#222222;font-weight:600}
.cpanel .timelab{font-size:11px;fill:#5c6672}
.cpanel .todaylab{font-size:11px;fill:#B45309;font-style:italic}
.cpanel .moon-dark{fill:#26314F}
.cpanel .moon-lit{fill:#F2ECD8}
.cpanel .moon-ring{fill:none;stroke:#888888;stroke-width:1}
.cpanel .band-night{fill:#3A5175} .cpanel .band-astro{fill:#4A648C}
.cpanel .band-naut{fill:#6C8FBF} .cpanel .band-civil{fill:#9FBCDE}
.cpanel .band-day{fill:#D7E6F5}
.cpanel .tick-sun{stroke:#D97706;stroke-width:2}
.cpanel .tick-moon{stroke:#5F85E6;stroke-width:2}
.cpanel .gridline{stroke:#9aa2ab;stroke-width:1}
.cpanel .nowline{stroke:#B45309;stroke-width:1.5}
.cpanel #day-strip{min-height:96px}
@media (prefers-reduced-motion: no-preference){
  .cpanel .nowpulse{animation:cpulse 3s ease-in-out infinite}
  @keyframes cpulse{50%{opacity:.55}}
}

/* update-bar page (Stars): the "checking" note beside the bar */
.cpanel .updating-note{color:#cccccc;font-size:.75em}

/* celestial tab strip (celestial_menubar.inc), radar_menubar pattern */
.celnav{width:100%;margin:18px 0 0}
.celnav table{text-align:center;width:44%;margin-left:28%;border-collapse:collapse}
.celnav td{background-color:#5A6673;text-align:center;border:3px solid Silver;padding:0}
.celnav a{display:inline-block;width:20%;padding:9px 0;color:#f2f2f2;
          text-decoration:none;font-size:17px}
.celnav a:hover{background-color:#ddd;color:black}
.celnav a.active{background-color:SlateGray;color:white}

/* ---- the home page's Sun & Moon widget (sunmoon.inc): the celestial
       components at widget scale, in the front page's right column ---- */
.cpanel.cpanel-widget{padding:0;margin-top:0;font-size:15px;text-align:left}
.cpanel-widget .smtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cpanel-widget .smrow{display:flex;gap:14px;align-items:center;margin-top:12px}
.cpanel-widget #sm-moon-disc{width:64px;height:64px;flex:none}
.cpanel-widget .smnext{color:#5c6672;font-size:13px;margin-top:12px}
.cpanel-widget .smmore{display:inline-block;margin-top:4px;font-size:14px}

/* ---- smartphone shell overrides (the _smartphone twins add these classes,
       scaling the shared includes on the site's fixed 1124px canvas) ---- */
.cpanel-sp{font-size:26px}
.cpanel-sp .tiles{grid-template-columns:repeat(3,1fr)}
.cpanel-sp .gridlab{font-size:22px}
.cpanel-sp .nowlab{font-size:22px}
.cpanel-sp .todaylab{font-size:20px}
.cpanel-sp #day-strip{min-height:150px}
/* One column on the smartphone canvas: full-width charts and tables (the
   wireframes' stacking order); countdown chips two-by-two; planet cards
   two-up so their mono lines don't wrap. */
.cpanel-sp .maingrid{grid-template-columns:1fr}
.cpanel-sp .countdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cpanel-sp .cards{grid-template-columns:repeat(2,1fr)}
/* Four-tile groups pair up on the smartphone canvas (today/solar noon on one
   row, tomorrow sunrise/sunset together on the next). */
.cpanel-sp .tiles-pairs{grid-template-columns:repeat(2,1fr)}
.celnav-sp table{width:86%;margin-left:7%}
.celnav-sp a{padding:12px 0;font-size:32px}