/* 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. */

/* The panels' own box model.  The bundled page's `*` reset lives in
 * celestial-page.css now, and a host skin setting none (or content-box)
 * would lay these out wrong: every width and padding here was authored
 * under border-box. */
[data-celestial], [data-celestial] *{box-sizing:border-box}

/* The night plate.  The two fragment selectors beside :root scope the
 * same tokens to the SVG of a dome fragment or a pass chart drawn on the
 * night plate INSIDE a light page: skyfield colors its charts inline but
 * its labels by class only, and those classes read the tokens (the
 * chart-label ones through --skylab/--conlab below), so without this a
 * night dome in a light page (a fragment set on `theme = dark` in a
 * light report) would wear the page's dark ink.  The fragment's own
 * data-dome-palette / data-pass-palette says which plate it is.  ONLY
 * on that mismatch: a fragment on the page's own plate takes its tokens
 * from :root like everything else, so a consumer's `:root{--brass:...}`
 * override reaches the charts too (the contract in the manual).  The
 * SVG only: the pass chart's head line (.passhead, HTML beside the SVG)
 * sits on the PAGE's surface and keeps the page's tokens. */
:root, .theme-dark, .theme-light .domefrag[data-dome-palette="night"] svg, .theme-light .passfrag[data-pass-palette="night"] svg{
  --night:#000000;   /* page background */
  --vault:#000000;   /* cards and chips */
  --ink:#E9E4D4;     /* primary text */
  --muted:#C0C5D9;   /* secondary text */
  --brass:#E0C27F;   /* accent */
  --line:#000000;    /* borders, hairlines */
  /* Chart furniture -- the dial's rings, ticks and rim.  NOT --line: that
   * is the color of a section border, and the dial is drawn ON the surface
   * that border surrounds, where it measures 1.20-1.42:1.  This is
   * weewx-skyfield 2.2's night `grid` token (same value, same reason: it
   * fixed the identical inheritance on the dome's altitude rings and
   * meridian cross), so the two pages still read as one family.  --line
   * stays exactly as it is for the borders and hairlines it is for. */
  --grid:#6E7DBA;
  /* The sky charts' small labels (skyfield's sky.css values, kept in
   * step by test).  The star and ring labels are --muted on both plates;
   * the constellation names carry their own value. */
  --skylab:var(--muted); --conlab:#BBC5E3;
  /* Per-body identity colors (weewx-skyfield's night-plate values --
   * the traditional astronomy scheme: yellow sun, silver moon, gray
   * Mercury, pearly Venus).  Earth (the dial's center) and Proxima
   * (silver, like the stars) are celestial's own. */
  --c-sun:#FFD75E; --c-moon:#C9D0DA; --c-mercury:#9CA0AC; --c-venus:#F0E3BE;
  --c-mars:#D06C56; --c-jupiter:#D89A56; --c-saturn:#AC8F3E;
  --c-uranus:#35A8BE; --c-neptune:#5F85E6;
  --c-earth:#7FB4A2; --c-proxima:#C9D0DA;
  /* The halo: the color a mark is outlined in so it stays separate from
   * whatever it sits on, and the fill of the hollow inversions (a
   * satellite in shadow, a comet too faint to see).  skyfield's palettes
   * carry it under the same name; on the night plate it is the page
   * black, which is why this was spelled --night through 8.2. */
  --halo:#0A0F22;
  /* The three marks whose treatment DIFFERS IN KIND between the
   * plates, carried as tokens so a panel on its own plate inside a
   * page of the other still gets its own.  A custom property
   * resolves from the nearest ancestor that sets it, so the panel's
   * own theme class answers; a `.theme-light .cel-x` rule could not,
   * because a descendant selector matches on ANCESTRY ALONE and the
   * page would win however close the panel sat.  --chip-ring carries
   * the on/off, not a color: on night the chips wear no ring at all. */
  --chip-ring:0;
  --geo-ring-sun:var(--halo); --geo-ring-venus:var(--halo);
  --moon-dark:#1E2745; --moon-lit:#DDD8C4;
  --moon-rim:var(--c-moon); --moon-rim-op:.55;
  /* A comet below the horizon dims its tail no further than the plate
   * lets a mark stay findable (3.0:1 and APCA Lc 30 on the card). */
  --tail-below-op:.6;
  /* The three pale bodies need no edge on the night plate: their own
   * color IS the bright mark.  On paper they do -- see the light block.
   * Earth's --e- value is its center LABEL, text, so it is lifted from the
   * dot's green in the same hue: the dot's value is WCAG 7.44 but APCA
   * Lc -54.5 on the card, and text needs Lc 60 (8.56 / Lc -61.3 here). */
  --e-sun:#FFD75E; --e-moon:#C9D0DA; --e-venus:#F0E3BE; --e-earth:#92BFB0;
}
/* The light theme (theme = light, or auto with the sun up): the
 * paper-atlas plate, matching the 'light' palette the dome and the Next
 * Visible Pass chart are rendered with.  $celestial.theme_class resolves
 * the theme at generation time into this class on <html> -- it must sit
 * on the root element so color-scheme (and the canvas backdrop it
 * governs) flips with it, and it CANNOT be a browser-side toggle: the
 * embedded charts arrive as skyfield SVG with their colors already
 * inside them, and the javascript refetches them every 60 s.  The two
 * fragment selectors scope the same tokens to a light dome or chart
 * inside a dark page, and only there (see the night block above).
 *
 * Every value here is weewx-skyfield's PALETTES['light'], copied in --
 * the same cross-repo rule as the night values above, and the same
 * reason: two shades of one thing on one page is the failure mode.
 * Two values are this page's own to choose.  Proxima takes the light
 * plate's moon RING silver -- skyfield has no Proxima, and the stars on
 * paper are that color.  EARTH is the deliberate exception to the
 * copy-the-palette rule (8.3): skyfield draws Earth only in
 * its orrery, a panel this page does not embed, so the dial's center dot
 * is the one mark with no counterpart anywhere on this page to disagree
 * with -- and it keeps its own green identity on BOTH plates rather than
 * turning blue on paper as skyfield's earth_fill would.  The night green
 * is 2.35:1 on white, so paper takes a darker one of the same family:
 * 4.96:1 for the dot, 6.38:1 for the label.  Every OTHER body's light
 * value is skyfield's, and a test keeps it that way. */
.theme-light, .theme-dark .domefrag[data-dome-palette="light"] svg, .theme-dark .passfrag[data-pass-palette="light"] svg, :root:not(.theme-light) .domefrag[data-dome-palette="light"] svg, :root:not(.theme-light) .passfrag[data-pass-palette="light"] svg{
  --night:#EFECE2; --vault:#FFFFFF; --ink:#1D2C4E; --muted:#5C6672;
  --brass:#A44A08; --line:#C9CFD8; --grid:#7A899F;
  /* The paper plate hands the ring and star labels straight back to
   * --muted (sky.css's light rule), and the constellation names their
   * own value. */
  --skylab:var(--muted); --conlab:#57637B;
  --c-sun:#FACC15; --c-moon:#D6DAE0; --c-mercury:#52525B; --c-venus:#F0E4BE;
  --c-mars:#B23A24; --c-jupiter:#B06F2E; --c-saturn:#8F7524;
  --c-uranus:#20808F; --c-neptune:#3A63C4;
  --c-earth:#2E7D64;
  /* Proxima wears the stars' silver, which on paper is the light plate's
   * moon RING (#767E8A) -- its moon fill (#D6DAE0) is a 1.40:1 ghost on
   * white, and a star that cannot be seen is not a star. */
  --c-proxima:#767E8A;
  --halo:#FFFFFF;
  /* The paper plate's versions of the three: the chips take an inset
   * ring, the pale bodies' dial dots take their edge color instead of
   * a white halo that would outline them in nothing, and the moon's
   * rim goes full strength because its lit limb is nearly the page. */
  --chip-ring:1.5px;
  --geo-ring-sun:var(--e-sun); --geo-ring-venus:var(--e-venus);
  --tail-below-op:.75;
  --moon-dark:#26314F; --moon-lit:#F2ECD8;
  --moon-rim:#868686; --moon-rim-op:1;
  /* Pale on paper: sun 1.53:1, moon 1.40, venus 1.27 against the white
   * panel -- as fills they are nearly not there.  skyfield's light
   * palette answers this with a `ring` per pale body, a darker edge in
   * the body's own hue, and these are those three values.  They serve
   * every EDGE the body draws: the dot's outline, its dashed
   * below-horizon outline, its motion trail and its roster chip.  Earth
   * is not pale -- its --e- value is the darker green its center LABEL
   * takes, the dot itself being --c-earth. */
  --e-sun:#BC7800; --e-moon:#767E8A; --e-venus:#97864A; --e-earth:#1F6B54;
}
.cel-mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
/* skyfield writes `mono` on its own chart labels inside the fragments
 * (33 of them in a dome), so the bare class survives HERE ONLY -- scoped
 * to the fragment, where it styles skyfield's markup and cannot collide
 * with a host skin's own .mono. */
.domefrag .mono, .passfrag .mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.cel-sub{color:var(--muted); margin-top:6px; font-size:.95em}
#live-label{color:var(--brass); font-variant-caps:small-caps; letter-spacing:.1em}

/* Countdown central: the ticking event chips under the header.  The chip
 * family (.countdown/.count and the k/v/d cells) is borrowed from
 * weewx-skyfield's sky.css -- names and values kept in step, the same
 * cross-repo rule as the dome typography below.  The [hidden] rule is
 * celestial's own: display:flex would otherwise defeat the hidden
 * attribute the javascript toggles on the windowed chips. */
.cel-countdown{display:flex; gap:10px; flex-wrap:wrap}
.cel-count{border:1px solid var(--line); padding:7px 12px; display:flex; gap:8px;
       align-items:baseline; background:var(--vault)}
.cel-count .cel-k{color:var(--muted); font-variant-caps:small-caps; letter-spacing:.1em; font-size:.8em}
.cel-count .cel-v{font-size:.9em}
.cel-count .cel-d{color:var(--brass); font-size:.8em}
/* Celestial's chips are two lines by design (a deliberate divergence
 * from sky.css's one-line chip): the label and the ticking value on
 * the first line, the event's clock time / date detail underneath.
 * Grid, not wrapped flex: a flex container's shrink-to-fit width is
 * computed as if every item sat on one line, so forcing the detail
 * onto a second line with flex-basis:100% left the detail's width as
 * dead space on the chip's right.  The grid sizes each chip to its
 * wider LINE.  justify-content:start keeps the auto columns at their
 * natural widths when the detail line is the wider one.  An empty
 * detail must not open a blank second line. */
.cel-count{display:grid; grid-template-columns:auto auto; row-gap:2px;
       justify-content:start}
.cel-count .cel-d{grid-column:1/-1}
.cel-count .cel-d:empty{display:none}
.cel-count[hidden]{display:none}
.cel-eyebrow{font-variant-caps:small-caps; letter-spacing:.22em; color:var(--brass); font-weight:400;
         font-size:.85em; margin:0 0 4px}
.cel-caption{color:var(--muted); font-size:.85em; margin:10px 0 0; max-width:68ch}
.cel-dialcaption{text-align:center; max-width:none}

/* The Geocentric: the dial beside its roster; one column below 1000px. */
.cel-geo-body{display:grid; grid-template-columns:minmax(0,1fr) 430px;
          gap:26px; align-items:center; margin-top:8px}
@media (max-width: 1000px){
  .cel-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. */
.cel-roster{border-top:1px solid var(--line)}
.cel-row{display:grid; grid-template-columns:7.2em 1fr; gap:.1em .6em;
     padding:.42em 0 .38em; border-bottom:1px solid var(--line);
     align-items:baseline}
.cel-bname{font-variant-caps:small-caps; letter-spacing:.1em; white-space:nowrap}
.cel-bname .cel-chip{display:inline-block; width:.62em; height:.62em; border-radius:50%;
             margin-right:.5em}
/* A body below the horizon steps down to the muted tier.  A color, not
 * opacity: every opacity that looks dimmed puts text under APCA Lc 60. */
.cel-row.cel-below .cel-bname, .cel-row.cel-below .cel-odo{color:var(--muted)}
.cel-odo{text-align:right; font-size:.9em; letter-spacing:.02em}
.cel-odo .cel-unit{color:var(--muted); font-size:.8667em}
.cel-rsub{grid-column:1 / -1; display:flex; justify-content:space-between; gap:.45em;
      color:var(--muted); font-size:.75em; flex-wrap:wrap}
.cel-rsub .cel-arr{color:var(--brass)}
/* The odometer flash: freshly changed digits ease from brass to ink. */
.cel-chg{animation:chgflash .9s ease-out}
@keyframes chgflash{from{color:var(--brass)}}
@media (prefers-reduced-motion: reduce){
  .cel-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. */
.cel-chip-sun{background:var(--c-sun)} .cel-chip-moon{background:var(--c-moon)}
.cel-chip-mercury{background:var(--c-mercury)} .cel-chip-venus{background:var(--c-venus)}
.cel-chip-mars{background:var(--c-mars)} .cel-chip-jupiter{background:var(--c-jupiter)}
.cel-chip-saturn{background:var(--c-saturn)} .cel-chip-uranus{background:var(--c-uranus)}
.cel-chip-neptune{background:var(--c-neptune)}
.cel-chip-proxima_centauri{background:var(--c-proxima)}
.cel-fill-sun{fill:var(--c-sun)} .cel-fill-moon{fill:var(--c-moon)}
.cel-fill-mercury{fill:var(--c-mercury)} .cel-fill-venus{fill:var(--c-venus)}
.cel-fill-mars{fill:var(--c-mars)} .cel-fill-jupiter{fill:var(--c-jupiter)}
.cel-fill-saturn{fill:var(--c-saturn)} .cel-fill-uranus{fill:var(--c-uranus)}
.cel-fill-neptune{fill:var(--c-neptune)}
.cel-fill-proxima_centauri{fill:var(--c-proxima)}
.cel-fill-earth{fill:var(--c-earth)}
.cel-stroke-sun{stroke:var(--e-sun)} .cel-stroke-moon{stroke:var(--e-moon)}
.cel-stroke-mercury{stroke:var(--c-mercury)} .cel-stroke-venus{stroke:var(--e-venus)}
.cel-stroke-mars{stroke:var(--c-mars)} .cel-stroke-jupiter{stroke:var(--c-jupiter)}
.cel-stroke-saturn{stroke:var(--c-saturn)} .cel-stroke-uranus{stroke:var(--c-uranus)}
.cel-stroke-neptune{stroke:var(--c-neptune)}
.cel-stroke-proxima_centauri{stroke:var(--c-proxima)}
/* On paper the sun, moon and Venus cannot carry their own mark (1.53,
 * 1.40, 1.27:1 as fills on white), so every EDGE they draw switches to
 * the light plate's ring color for that body: the roster chip takes it
 * as an inset ring -- the same treatment skyfield gives its own roster
 * dots on this plate -- and the trails and dashed below-horizon
 * outlines take it as their stroke.  The night plate needs none of
 * this, so --e-* there is just the body color and these rules are the
 * only place the two plates diverge in kind rather than in value. */
.cel-chip-sun{box-shadow:inset 0 0 0 var(--chip-ring) var(--e-sun)}
.cel-chip-moon{box-shadow:inset 0 0 0 var(--chip-ring) var(--e-moon)}
.cel-chip-venus{box-shadow:inset 0 0 0 var(--chip-ring) var(--e-venus)}

/* The dial's static furniture.  The per-ring stroke-opacity (0.5 inside
 * 10 au, 0.4 outside) is set by the javascript, which draws them.  The
 * grid is deliberately recessive -- see the note there -- but the RIM is
 * not scale furniture: it is the dial's outer boundary, one circle rather
 * than eight, so it stays a notch firmer (2.50:1) and gives the receding
 * decades something to be contained by.  The ticks follow the rings.
 * ONE set of weights serves both plates: with the light plate's own grid
 * (#7A899F on white) the same opacities measure dL* 21.1 / 16.7 / 26.3
 * against the night plate's settled 23.4 / 18.9 / 28.8 -- the same
 * furniture at the same recessive distance, which is what the eye reads
 * here, not the WCAG ratio (dark-plate rule, 8.2). */
.cel-geo-ring{fill:none; stroke:var(--grid)}
.cel-geo-rim{fill:none; stroke:var(--grid); stroke-opacity:.62; stroke-width:1.4}
.cel-geo-tick{stroke:var(--grid); stroke-opacity:.4; stroke-width:1}
.cel-geo-tick-major{stroke-width:1.6}
.cel-geo-earth{stroke:var(--halo); 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.  That dashed
 * outline is what CARRIES a down body: it is the body's own color at full
 * strength (4.72:1 even for Mars, the darkest) where the dimmed fill
 * reaches 1.90, so the weight belongs on the outline.  1.5px, not the
 * hairline it was through 8.1. */
.cel-geodot.cel-ring{stroke:var(--halo); stroke-width:1}
/* The paper halo is the panel itself, so a pale body would be outlined
 * in nothing; sun and Venus take their edge instead.  (The moon's dial
 * mark is the phase disc below, not a dot, and Proxima's light silver
 * already reads at 4.10:1.) */
.cel-geodot.cel-ring.cel-fill-sun{stroke:var(--geo-ring-sun)}
.cel-geodot.cel-ring.cel-fill-venus{stroke:var(--geo-ring-venus)}
.cel-geodot.cel-below{fill-opacity:.45; stroke-width:1.5; stroke-dasharray:2.5 2.5}
.cel-sunglow{filter:blur(6px); opacity:.55}
/* The moon's true-phase disc, silver-rimmed so a new moon never vanishes. */
.cel-moon-dark{fill:var(--moon-dark)}
.cel-moon-lit{fill:var(--moon-lit)}
.cel-moon-rim{fill:none; stroke:var(--moon-rim); stroke-opacity:var(--moon-rim-op);
              stroke-width:1}
/* Below the horizon the disc dims and the rim goes dashed.  The rim keeps
 * its plate's own strength (--moon-rim-op): it is what carries a down moon,
 * and dimming the whole mark would take it past findable on either plate.
 * The opacity sits on the disc's own group, so the dark disc and its lit
 * limb dim as one image -- on the two shapes separately, the lit limb
 * would show the dark disc through it. */
.cel-geomoon.cel-below .cel-moon-disc{opacity:.55}
.cel-geomoon.cel-below .cel-moon-rim{stroke-dasharray:2.5 2.5}
/* Motion trails: per-segment opacity is set by the javascript, which ramps
 * it from a visible floor (the old ramp started from nothing: the oldest
 * segment landed at 1.02:1, ink spent where no eye can find it). */
.cel-trail{stroke-width:1.5; stroke-linecap:round}
/* Comet marks (javascript-drawn on the dial): a brass diamond with an
 * anti-sunward tail fan, solid when naked-eye bright (mag <= 6), the
 * hollow inversion when fainter or when magnitude is honestly absent --
 * the satdot/shadow convention.  One shared color: comet tags are
 * dynamic, so per-tag classes cannot exist (the satellite precedent). */
.cel-cometdot{fill:var(--brass); stroke:var(--halo); stroke-width:1.5}
.cel-cometdot.cel-faint{fill:var(--halo); stroke:var(--brass); stroke-width:2}
.cel-cometdot.cel-below{fill-opacity:.45; stroke-dasharray:2.5 2.5}
.cel-comet-tail{stroke:var(--brass)}
.cel-geocomet.cel-below .cel-comet-tail{opacity:var(--tail-below-op)}
.cel-stroke-comet{stroke:var(--brass)}
.cel-chip-comet{background:var(--brass)}

/* 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.cel-dim{fill:var(--muted)}
.gridlab{font-size:10px; fill:var(--muted)}
.cel-earthlab{font-size:11px; fill:var(--e-earth); font-variant-caps:small-caps;
          letter-spacing:.12em; text-anchor:middle}

/* The sky dome: weewx-skyfield's dome_svg embedded beside the satellite
 * roster; one column below 1000px, like the Geocentric.  The dome is
 * sky-chart orientation (north top, east LEFT) -- deliberately opposite
 * the dial; do not harmonize them.  NOTE: "dome-body" is taken -- it is
 * the class on the embedded SVG's per-body mark groups (skyfield 2.0's
 * data-body consumer contract), so the panel wrapper is "domepanel". */
.cel-domepanel{display:grid; grid-template-columns:minmax(0,1fr) 430px;
           gap:26px; align-items:center; margin-top:8px}
@media (max-width: 1000px){
  .cel-domepanel{display:flex; flex-direction:column; align-items:stretch}
}
#dome-wrap svg{max-width:640px; margin:0 auto}
.cel-roster .cel-eyebrow{margin-top:2px}
.cel-chip-sat{background:var(--brass)}
.cel-satline{font-size:.8em}
/* Dome typography borrowed from weewx-skyfield's sky.css -- names and
 * values kept in step, same cross-repo rule as cardinal/bodylab/gridlab
 * above -- the light-theme variants included, as of 8.3.
 * The dome and next-visible-pass charts put these small labels on the
 * dome gradient, whose rim is lighter than the panel surface.  .skylab is
 * the dome's scoped opt-in, worn by the ring-degree labels as
 * "mono gridlab skylab"; the axis labels on every other panel sit on the
 * panel surface and keep plain .gridlab.  Equal specificity, so .skylab
 * MUST stay after .gridlab above -- source order is all that makes it win.
 * The values are sky.css's: --muted clears the dome's rim on both plates,
 * so the ring and star labels take it, and only .conlab carries a value
 * of its own.  The constellation names draw at full strength; opacity is
 * part of a text color and would put them under the text bars.
 * Both plates' values are the --skylab/--conlab tokens in the two token
 * blocks above (sky.css writes them as literals plus a :root.theme-light
 * rule; the test resolves both to the same values), so that a fragment
 * on the other plate from the page -- whose SVG the token blocks scope
 * by its own data-dome-palette / data-pass-palette -- takes its labels'
 * colors from the same place as every other class: one rule per class,
 * no plate variants to keep in step. */
.skylab{fill:var(--skylab)}
.starlab{font-size:10px; fill:var(--skylab); font-family:Georgia, serif; font-style:italic}
.conlab{font-size:10px; fill:var(--conlab); font-family:Georgia, serif; font-style:italic;
        letter-spacing:.14em; text-transform:uppercase}
.satlab{fill:var(--brass); font-family:Georgia, serif}
.nowlab{font-size:10px; fill:var(--brass)}
/* The live satellite layer (javascript-drawn): the marker dot and its
 * name, each with a faint variant for a satellite that is up but not
 * visible to the eye (daylight, or in Earth's shadow). */
.cel-satdot{fill:var(--brass); stroke:var(--halo); stroke-width:1.5}
/* In Earth's shadow: the fill/stroke inversion of weewx-skyfield's static
   dome marker (hollow ring, background fill so hover still lands). */
.cel-satdot.cel-shadow{fill:var(--halo); stroke:var(--brass); stroke-width:2}
/* In a bright sky (sun >= -6): dimmed but drawn.  Whole-element opacity so
   the hollow ring dims too (fill-opacity would leave its stroke bright);
   .8 is the least that stays findable on the light dome's rim.  The name
   steps to the muted tier instead: text takes no opacity. */
.cel-satdot.cel-faint{opacity:.8}
.satlab.cel-faint{fill:var(--muted)}

/* The Next Visible Pass panel (weewx-skyfield's pass_chart_html embedded beside
 * the visible-pass roster): the same two-column shape as the dome panel
 * above, chart left, roster right, one column on narrow screens.  The
 * passhead trio is borrowed from sky.css -- names and values kept in
 * step, the same cross-repo rule as the dome typography above. */
.cel-passpanel{display:grid; grid-template-columns:minmax(0,1fr) 430px;
           gap:26px; align-items:center; margin-top:8px}
@media (max-width: 1000px){
  .cel-passpanel{display:flex; flex-direction:column; align-items:stretch}
}
#pass-chart{max-width:640px; margin:0 auto}
.cel-passcaption{max-width:640px; margin-left:auto; margin-right:auto}
.passhead{display:flex; justify-content:space-between; align-items:baseline;
          gap:12px; margin-bottom:10px; flex-wrap:wrap}
.passname{font-variant-caps:small-caps; letter-spacing:.1em}
.passwhen{font-size:.85em; color:var(--brass)}

/* Shown in the panel when no extended almanac serves the report.  The
   dome's hint arrives inside the .domepanel grid (the panel renders it
   where the dome would be), so it spans the grid's columns. */
.cel-skyhint{color:var(--muted); font-style:italic; text-align:center;
         border:1px dashed var(--line); padding:38px 20px; margin:8px 0 6px}
.cel-skyhint a{color:var(--brass)}
.cel-domepanel > .cel-skyhint{grid-column:1 / -1}

/* The dome's health line: shown only when the backdrop has stopped
   advancing and the dome has frozen.  A caption-sized line rather than
   the install hint's dashed box -- it sits under a chart that is still
   worth reading, just no longer current.  Deliberately NO display
   property: the javascript hides it with the hidden attribute, and a
   display here would defeat it (the .count lesson). */
.cel-stalehint{color:var(--brass); font-style:italic; text-align:center;
           font-size:.82em; margin:2px 0 6px}
.cel-stalehint a{color:inherit}

/* The tap tooltip (sky.js): the same text as a mark's hover <title>,
   shown as a floating chip when a finger has no hover to offer. */
.skytip{position:fixed; display:none; z-index:10; max-width:min(340px, 90vw);
        background:var(--vault); color:var(--ink); border:1px solid var(--brass);
        padding:6px 10px; font-size:.85rem; pointer-events:none;
        box-shadow:0 2px 10px rgba(0,0,0,.4)}