/* The Sky page: a one-page showcase of the weewx-skyfield almanac.
   Copyright (C)2022-2026 by John A Kline (john@johnkline.com)
   Distributed under the terms of the GNU Public License (GPLv3) */
:root{
  --night:#000000; --vault:#000000; --ink:#E9E4D4; --muted:#C0C5D9;
  --brass:#E0C27F; --line:#ffffff;
  color-scheme: dark;

/*  --ink:#E9E4D4;     /* primary text */
/*  --muted:#C0C5D9;   /* secondary text */
/*  --brass:#E0C27F; 

}
/* The light theme (theme = light, or auto with the sun up): the paper-atlas
   plate, matching the panels' 'light' palette.  The template resolves the
   report's theme option 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. */
:root.theme-light{
  --night:#EFECE2; --vault:#FFFFFF; --ink:#1D2C4E; --muted:#5C6672;
  --brass:#A44A08; --line:#C9CFD8;
  color-scheme: light;
}
*{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:1560px; 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}
.smallcaps{font-variant-caps: small-caps; letter-spacing:.14em}
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}
.moonbox{display:flex; align-items:center; gap:14px}
.moonbox .mlabel{text-align:right}
.moonbox .mname{font-variant-caps:small-caps; letter-spacing:.1em}
.moonbox .mpct{color:var(--muted); font-size:.85rem}
.countdown{display:flex; gap:10px; flex-wrap:wrap}
.count{border:1px solid var(--line); padding:7px 12px; display:flex; gap:8px;
       align-items:baseline; background:var(--vault)}
.count .k{color:var(--muted); font-variant-caps:small-caps; letter-spacing:.1em; font-size:.8rem}
.count .v{font-size:.9rem}
.count .d{color:var(--brass); font-size:.8rem}
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}
/* The lunation panel's apsis footer: a brass supermoon callout (rendered
   only when one is upcoming) over the quiet perigee/apogee line. */
.supermoon{color:var(--brass); font-weight:700; font-size:.95rem; margin:10px 0 0}
.apsis{color:var(--muted); font-size:.85rem; margin:8px 0 0}
.caption code{font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.92em;
              color:var(--ink); background:none}
/* Two tracks on wide screens: primary (dome, ribbons, table) beside a
   right rail (chips, orrery, analemma).  Below the breakpoint the tracks
   dissolve (display:contents) and the sections reorder into one column. */
.main{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:30px; align-items:start}
.primary, .rail{display:flex; flex-direction:column; gap:30px; min-width:0}
.sec-dome svg{max-width:820px; margin:0 auto}
@media (max-width: 1159px){
  /* align-items:start would carry over from the grid rule and shrink the
   * flex-column items to fit their content; stretch restores full width */
  .main{display:flex; flex-direction:column; align-items:stretch}
  .primary, .rail{display:contents}
  /* EVERY section needs a number here: order defaults to 0, so a
   * section left out of this list sorts ahead of the dome. */
  .sec-dome{order:1} .sec-chips{order:2} .sec-satellites{order:3}
  .sec-passchart{order:4} .sec-sunpath{order:5} .sec-ribbons{order:6}
  .sec-daylength{order:7} .sec-eot{order:8} .sec-lunation{order:9}
  .sec-orrery{order:10} .sec-analemma{order:11} .sec-table{order:12}
  .sec-sunpath svg, .sec-orrery svg, .sec-analemma svg,
  .sec-passchart svg{max-width:560px; margin:0 auto}
}
.chips{display:flex; flex-direction:column; gap:9px}
.chip{display:flex; gap:10px; align-items:flex-start; border-bottom:1px solid var(--line);
      padding:7px 2px}
.chip:last-child{border-bottom:none}
/* The chip and table swatches.  Their COLOR arrives inline from the panel,
   as the custom properties --sky-dot and (pale bodies on the paper plate)
   --sky-dot-ring, so that `background` itself stays free: an inline
   background would outrank every rule a consuming skin could write, and
   these swatches are meant to be themeable alongside the SVG panels' role
   classes.  A skin that themes them overrides `background` on
   [data-body="<name>"] .dot, which beats this rule on ordinary
   specificity.  New in 2.4; a skin that copies rules piecemeal needs this
   one, or its swatches lose their color. */
.dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; margin-top:6px;
     background:var(--sky-dot); box-shadow:inset 0 0 0 1.5px var(--sky-dot-ring, transparent)}
.chipname{font-variant-caps:small-caps; letter-spacing:.1em}
.chipline{font-size:.85rem}
.chipsub{font-size:.78rem; color:var(--muted)}
/* The pass chart's dated head line: the panel's whole point is that the
 * chart belongs to a future minute, so the date reads before the sky. */
.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:.85rem; color:var(--brass)}
svg{width:100%; height:auto; display:block}
svg text{fill:var(--ink)}
.cardinal{font-size:14px; fill:var(--brass); letter-spacing:.1em}
/* The sky charts' small labels: .skylab is the scoped hook for text drawn
   on the dome gradient rather than on the panel surface, whose rim is much
   lighter.  From 2.2 it carried a lift of its own, because --muted reached
   only 3.70:1 there.  Every text color now clears WCAG 4.5 and APCA Lc 60
   on the panel AND on the dome, on both plates, so the hook points back at
   --muted; it stays so a skin can still style dome text apart. */
.gridlab{font-size:10px; fill:var(--muted)}
/* Labels that sit ON the twilight bands rather than on the panel: the sun
   path's hour numbers, which follow the arc down through the bands, and the
   moon's times.  The panel-surface gray reads 3.59:1 against the night
   plate's day band and 1.03 against the paper plate's astronomical one, so
   neither plate can use it here.  The night plate has ink, which clears
   every one of its bands at 8.52 or better, over a casing in its night
   band's color that covers the sun's arc under the hour numbers.  The paper
   plate has nothing that clears them -- not muted, not ink, not black -- so
   its labels read against a casing of their own instead (see _band_text),
   which is what every other mark over these bands already does.  Like
   .skylab in 2.2, this rides alongside .gridlab: a skin with no .bandlab
   rule gets the gridlab gray and merely misses the lift.  New in 2.4. */
.bandlab{fill:var(--ink)}
:root.theme-light .bandlab{fill:var(--muted)}
.skylab{fill:var(--muted)}
.moonlab{font-size:10px; fill:#C9D0DA}
/* The moon's times on the sun-path chart sit ON the twilight bands, not on
   the panel, and no single color clears 4.5:1 against all five of the paper
   plate's -- not muted, not ink, not black.  So the label reads against its
   own casing (see _band_text) and takes the same gray every other label on
   that chart wears; the moon's #767E8A is its dot's RIM color, which held
   4.10 on white and 1.23 on the nautical band.  Fixed in 2.4. */
:root.theme-light .moonlab{fill:var(--muted)}
.starlab{font-size:10px; fill:var(--muted); font-family:Georgia, serif; font-style:italic}
.conlab{font-size:10px; fill:#BBC5E3; font-family:Georgia, serif; font-style:italic;
        letter-spacing:.14em; text-transform:uppercase}
:root.theme-light .conlab{fill:#57637B}
.bodylab{font-size:11px; fill:var(--ink); font-family:Georgia, serif}
.satlab{fill:var(--brass); font-family:Georgia, serif}
.rowlab{font-size:13px; fill:var(--ink); font-family:Georgia, serif;
        font-variant-caps:small-caps; letter-spacing:.06em}
.timelab{font-size:11px; fill:var(--muted)}
.nowlab{font-size:10px; fill:var(--brass)}
.todaylab{font-size:11px; fill:var(--brass); font-family:Georgia, serif; font-style:italic}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.85rem}
th{font-variant-caps:small-caps; letter-spacing:.1em; font-weight:400; color:var(--muted);
   text-align:right; padding:6px 10px; border-bottom:1px solid var(--brass)}
th:first-child{text-align:left}
td{padding:6px 10px; text-align:right; border-bottom:1px solid var(--line);
   font-family:ui-monospace, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums}
td.tname{text-align:left; font-family:Georgia, serif; font-variant-caps:small-caps;
         letter-spacing:.06em}
td .dot{margin-right:8px; margin-top:0; vertical-align:baseline}
footer{color:var(--muted); font-size:.82rem; border-top:1px solid var(--line);
       padding-top:16px; text-align:center}
footer .sep{color:var(--brass); padding:0 6px}
footer a{color:inherit; text-underline-offset:3px; text-decoration-color:var(--brass)}
footer a:hover{color:var(--brass)}
/* 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)}
@media (prefers-reduced-motion: no-preference){
  .nowpulse{animation:pulse 3s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.55}}
}