/* markvd.net/weather
   Reuses the main site tokens. Two additions the weather pages need:
   --cool for anything on the cold/moist side of a chart, and --alert for
   gusts and warnings. No other colors are introduced. */

:root {
  --bg:     #0b0f0c;
  --panel:  #10160f;
  --panel2: #0d120c;
  --line:   #1e2a1f;
  --ink:    #d9e4da;
  --dim:    #7d8f7f;
  --green:  #5dd97c;
  --amber:  #f0b45a;
  --cool:   #6fb3ff;
  --alert:  #ff8a5c;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --maxw:   1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

a { color: var(--green); text-decoration: none; border-bottom: 1px dotted rgba(93, 217, 124, .45); }
a:hover { color: var(--amber); border-bottom-color: rgba(240, 180, 90, .6); }
a:focus-visible, .card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--amber);
  color: var(--bg); padding: 8px 14px; border: 0; z-index: 20;
}
.skip:focus { left: 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 12, .93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.nav-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 10px; padding-bottom: 10px; }
.brand { color: var(--amber); font-weight: 700; letter-spacing: .12em; border: 0; }
.brand:hover { color: var(--green); }
.nav-links { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.nl { color: var(--dim); border: 0; font-size: 13px; letter-spacing: .06em; }
.nl:hover { color: var(--green); }
.nl.active { color: var(--ink); border-bottom: 1px solid var(--amber); }

/* ---------- headings ---------- */

.eyebrow {
  color: var(--dim); font-size: 11px; letter-spacing: .18em;
  text-transform: lowercase; margin: 0 0 6px;
}
.page-head { padding: 34px 0 10px; border-bottom: 1px solid var(--line); }
h1 { font-size: clamp(28px, 6vw, 42px); margin: 0 0 6px; letter-spacing: -.01em; color: var(--ink); }
h1 .st, .card-name .st { color: var(--dim); font-size: .55em; letter-spacing: .16em; }
.lede { color: var(--dim); margin: 0 0 10px; max-width: 62ch; }
.meta-line { color: var(--dim); font-size: 12.5px; margin: 0 0 14px; }

.panel { padding: 28px 0; border-bottom: 1px solid var(--line); }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.panel-head h2 { font-size: 19px; margin: 0; color: var(--green); letter-spacing: .02em; }
.panel-note { margin: 0; color: var(--dim); font-size: 12.5px; }

/* ---------- banners ---------- */

.banner {
  border-left: 3px solid var(--amber); background: var(--panel);
  padding: 10px 14px; margin: 0 0 12px; font-size: 13.5px;
}
.banner-stale { border-left-color: var(--amber); }
.banner-warn { border-left-color: var(--alert); color: var(--dim); }

/* ---------- now ---------- */

.now-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.now-main { min-width: 0; }
.big-temp {
  font-size: clamp(62px, 17vw, 108px); line-height: .9; margin: 0;
  color: var(--amber); font-weight: 600; letter-spacing: -.04em;
}
.big-temp .deg { font-size: .3em; color: var(--dim); letter-spacing: 0; margin-left: 6px; vertical-align: super; }
.cond { font-size: 19px; margin: 10px 0 2px; color: var(--ink); }
.feels, .delta { margin: 2px 0; color: var(--dim); font-size: 13.5px; }
.delta { color: var(--green); }
.dim { color: var(--dim); }

.now-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.stat { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--green); padding: 10px 12px; }
.stat-k { margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.stat-v { margin: 2px 0 0; font-size: 20px; color: var(--ink); }
.stat-n { margin: 0; font-size: 11.5px; color: var(--dim); }

/* ---------- whois blocks (the site's signature element) ---------- */

.whois { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.whois-2col { column-gap: 34px; }
.wrow { display: flex; gap: 12px; padding: 3px 0; border-bottom: 1px dotted rgba(30, 42, 31, .8); font-size: 13.5px; }
.wrow:last-child { border-bottom: 0; }
.wk { color: var(--dim); min-width: 15ch; flex: 0 0 auto; }
.wv { color: var(--ink); word-break: break-word; }

.raw {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  padding: 10px 12px; overflow-x: auto; font-size: 12.5px; margin: 6px 0 0;
}

/* ---------- charts ---------- */

.chart-box { background: var(--panel); border: 1px solid var(--line); padding: 10px 8px; }
.chart { display: block; width: 100%; height: auto; }
.split { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.split-a { display: flex; justify-content: center; background: var(--panel); border: 1px solid var(--line); padding: 6px; }
.split-a .chart { max-width: 240px; }
.meters { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.meters .chart { max-width: 340px; }

.legend { color: var(--dim); font-size: 12px; margin: 8px 0 0; }
.key { display: inline-block; width: 14px; height: 3px; margin: 0 6px 0 14px; vertical-align: middle; }
.legend .key:first-child { margin-left: 0; }
.k-warm { background: var(--amber); }
.k-cool { background: var(--cool); }
.k-alert { background: var(--alert); }

/* svg internals */
.gr { stroke: #1c2a1d; stroke-width: 1; }
.gv { stroke-dasharray: 2 4; }
.ax { stroke: #2a3a2b; stroke-width: 1; }
.lbl { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
.ry { text-anchor: end; }
.cx { text-anchor: middle; }
.rx { text-anchor: end; }
.val { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.ln { fill: none; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.fill { stroke: none; }
.dot { stroke: var(--bg); stroke-width: 1; }

.ln.s-warm  { stroke: var(--amber); }
.ln.s-cool  { stroke: var(--cool); }
.ln.s-green { stroke: var(--green); }
.ln.s-alert { stroke: var(--alert); stroke-dasharray: 3 3; stroke-width: 1.4; }
.dot.s-warm  { fill: var(--amber); }
.dot.s-cool  { fill: var(--cool); }
.dot.s-green { fill: var(--green); }
.dot.s-alert { fill: var(--alert); }
.val.s-warm  { fill: var(--amber); }
.val.s-cool  { fill: var(--cool); }
.val.s-green { fill: var(--green); }
.val.s-alert { fill: var(--alert); }
.s-warm-fill  { fill: rgba(240, 180, 90, .13); }
.s-cool-fill  { fill: rgba(111, 179, 255, .11); }
.s-green-fill { fill: rgba(93, 217, 124, .12); }
.s-alert-fill { fill: rgba(255, 138, 92, .10); }

/* compass */
.dial { fill: none; stroke: #22302300; stroke: #223023; stroke-width: 1; }
.dial-in { stroke: #1a2419; }
.tick { stroke: #2f4030; stroke-width: 1; }
.tick-maj { stroke: var(--dim); stroke-width: 1.6; }
.tick-m { stroke: var(--bg); stroke-width: 1; }
.spoke { stroke: var(--green); stroke-width: 2; }
.arrow { stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; }
.arrow-head { fill: var(--amber); }
.card { fill: var(--dim); font-size: 11px; letter-spacing: .1em; }
.dial-val { fill: var(--ink); font-family: var(--mono); font-size: 26px; font-weight: 600; }
.dial-unit { fill: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.dial-sub { fill: var(--dim); font-family: var(--mono); font-size: 11.5px; }

/* meters */
.track { fill: #16201600; fill: #162016; stroke: var(--line); stroke-width: 1; }
.bar.s-cool { fill: var(--cool); }
.bar.s-warm { fill: var(--amber); }
.bar.s-dim  { fill: var(--dim); }

/* ---------- alerts ---------- */

.alert { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--alert); padding: 12px 14px; margin: 0 0 12px; }
.alert h3 { margin: 0 0 6px; font-size: 16px; color: var(--alert); }
.alert .pill { font-size: 10.5px; letter-spacing: .14em; color: var(--bg); background: var(--alert); padding: 2px 7px; vertical-align: middle; }
.alert-head { margin: 0 0 8px; font-size: 13.5px; }
.alert-inst { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.sev-minor { border-left-color: var(--amber); }
.sev-minor h3 { color: var(--amber); }
.sev-minor .pill { background: var(--amber); }
.sev-unknown { border-left-color: var(--dim); }
.sev-unknown h3 { color: var(--dim); }
.sev-unknown .pill { background: var(--dim); }

/* ---------- location cards ---------- */

.cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--green); padding: 14px 16px; color: var(--ink);
}
.card:hover { border-color: var(--amber); background: #131b12; color: var(--ink); }
.card-name { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--dim); }
.card-temp { margin: 4px 0 0; font-size: 40px; line-height: 1; color: var(--amber); font-weight: 600; letter-spacing: -.03em; }
.card-temp .deg { font-size: .32em; color: var(--dim); vertical-align: super; margin-left: 4px; }
.card-cond { margin: 4px 0 0; font-size: 13px; }
.card-spark { margin: 8px 0 0; }
.card-spark .chart { max-width: 100%; }
.card-foot { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.card-alert { margin: 4px 0 0; font-size: 12px; color: var(--alert); }
.card-more { margin: 8px 0 0; font-size: 12px; color: var(--green); letter-spacing: .08em; }

/* ---------- footer ---------- */

.footer { padding: 26px 0 40px; }
.foot-line { margin: 0 0 4px; font-size: 12px; color: var(--ink); }
.foot-line.dim { color: var(--dim); }

code { background: var(--panel); border: 1px solid var(--line); padding: 1px 5px; font-size: .92em; color: var(--amber); }

/* ---------- wider screens ---------- */

@media (min-width: 700px) {
  .now-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; }
  .now-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 240px minmax(0, 1fr); }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whois-2col { columns: 2; }
  .whois-2col .wrow { break-inside: avoid; }
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .nav, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- phase 2: forecast ---------- */

.pbar { stroke: none; }
.s-cool-bar { fill: rgba(111, 179, 255, .22); }
.blbl { fill: var(--dim); font-size: 9.5px; letter-spacing: .08em; }
.k-coolbar { background: rgba(111, 179, 255, .5); height: 9px; }

.chart-scroll { overflow-x: auto; }
.chart-scroll .chart { min-width: 640px; }

.rbar { stroke: none; }
.s-warm-bar  { fill: rgba(240, 180, 90, .55); }
.s-cool-bar  { fill: rgba(111, 179, 255, .22); }
.s-alert-bar { fill: rgba(255, 138, 92, .6); }
.s-dim-bar   { fill: rgba(125, 143, 127, .5); }
.rval { font-family: var(--mono); font-size: 11px; }
.rval.hi { fill: var(--ink); font-weight: 600; }
.rval.lo { fill: var(--dim); }
.day { fill: var(--ink); font-size: 11px; letter-spacing: .06em; }
.sub { font-size: 9.5px; }
.pop { font-size: 9px; }
.wknd { fill: rgba(93, 217, 124, .045); }
.freeze { stroke: var(--cool); stroke-dasharray: 4 4; opacity: .55; }
.freeze-lbl { fill: var(--cool); font-size: 9.5px; opacity: .8; }

.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fc-card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--amber); padding: 10px 12px; }
.fc-card.fc-night { border-top-color: var(--cool); background: var(--panel2); }
.fc-name { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.fc-temp { margin: 2px 0 0; font-size: 27px; line-height: 1.1; color: var(--amber); font-weight: 600; }
.fc-night .fc-temp { color: var(--cool); }
.fc-temp .deg { font-size: .42em; color: var(--dim); vertical-align: super; margin-left: 2px; }
.fc-hilo { font-size: .38em; color: var(--dim); letter-spacing: .12em; margin-left: 8px; vertical-align: middle; }
.fc-short { margin: 4px 0 0; font-size: 13px; }
.fc-bits { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.fc-more { margin: 8px 0 0; }

details { border-top: 1px dotted var(--line); }
summary {
  cursor: pointer; color: var(--green); font-size: 12px; letter-spacing: .08em;
  padding: 6px 0; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--dim); }
details[open] > summary::before { content: "- "; }
summary:hover { color: var(--amber); }
.fc-more p { margin: 4px 0 8px; font-size: 12.5px; color: var(--dim); }

.afd { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--green); padding: 4px 14px 2px; margin: 0 0 8px; }
.afd > summary { font-size: 12.5px; letter-spacing: .12em; }
.afd-p { margin: 6px 0 12px; font-size: 13px; color: var(--ink); max-width: 78ch; }

@media (min-width: 700px) {
  .fc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .fc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- phase 3: astronomy ---------- */

.tw-civil  { fill: rgba(240, 180, 90, .07); }
.tw-naut   { fill: rgba(111, 179, 255, .06); }
.tw-astro  { fill: rgba(111, 179, 255, .04); }
.tw-night  { fill: rgba(0, 0, 0, .35); }
.horizon   { stroke: var(--dim); stroke-width: 1; }
.nowline   { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.ln.s-sun  { stroke: var(--amber); stroke-width: 2.2; }
.ln.s-moon { stroke: #cfd8d0; stroke-width: 1.6; stroke-dasharray: 5 3; }
.dot.s-sun  { fill: var(--amber); }
.dot.s-moon { fill: #cfd8d0; }
.k-sun  { background: var(--amber); }
.k-moon { background: #cfd8d0; }

.moon-dark { fill: #161d17; }
.moon-lit  { fill: #e6ede7; }
.moon-edge { fill: none; stroke: #2f4030; stroke-width: 1; }

.moon-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.moon-disc { text-align: center; background: var(--panel); border: 1px solid var(--line); padding: 12px; }
.moon-disc .chart { width: 118px; margin: 0 auto; }
.moon-cap { margin: 6px 0 0; font-size: 12px; color: var(--dim); letter-spacing: .1em; }
.moon-facts { min-width: 0; }

.phase-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.phase-item { background: var(--panel); border: 1px solid var(--line); padding: 10px 8px; text-align: center; }
.phase-item .chart { width: 46px; margin: 0 auto; }
.phase-name { margin: 4px 0 0; font-size: 11.5px; color: var(--ink); }
.phase-when { margin: 1px 0 0; font-size: 11px; color: var(--dim); }

.planet-table { background: var(--panel); border: 1px solid var(--line); }
.prow {
  display: grid; grid-template-columns: 1.1fr .9fr .9fr .6fr 2fr;
  gap: 8px; padding: 6px 12px; font-size: 12.5px;
  border-bottom: 1px dotted rgba(30, 42, 31, .8);
}
.prow:last-child { border-bottom: 0; }
.phead { color: var(--dim); font-size: 11px; letter-spacing: .12em; }
.pname { color: var(--amber); }
.pmag { color: var(--ink); }
.pvis { color: var(--dim); }

.year-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 14px; }

@media (min-width: 700px) {
  .moon-grid { grid-template-columns: 160px minmax(0, 1fr); }
  .phase-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .prow { grid-template-columns: 1fr 1fr 1fr; }
  .prow span:nth-child(4) { display: none; }
  .prow span:nth-child(5) { grid-column: 1 / -1; }
}

/* ---------- phase 4: climate ---------- */

.envelope  { fill: rgba(217, 228, 218, .17); stroke: none; }
.monthline { stroke: #24321f; stroke-width: 1; }
.mon       { fill: var(--dim); font-size: 10px; letter-spacing: .08em; }
.ybar      { stroke: none; }
.c-cold2 { fill: #4a8fd6; }
.c-cold1 { fill: #7fb4e0; }
.c-near  { fill: #9aa89b; }
.c-warm1 { fill: #e8b46a; }
.c-warm2 { fill: #e0713f; }

.chart-scroll.wide .chart { min-width: 900px; }

.norm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.norm-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dim); padding: 12px 14px; }
.norm-card.warm { border-left-color: var(--amber); }
.norm-card.cool { border-left-color: var(--cool); }
.norm-val { margin: 2px 0 0; font-size: 30px; line-height: 1.05; color: var(--ink); font-weight: 600; }
.norm-dep { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.norm-card.warm .norm-dep { color: var(--amber); }
.norm-card.cool .norm-dep { color: var(--cool); }
.rank-line { margin: 0 0 14px; font-size: 13.5px; color: var(--green); }

.acc-table { background: var(--panel); border: 1px solid var(--line); margin-bottom: 4px; }
.arow {
  display: grid; grid-template-columns: 2.2fr .9fr .9fr .9fr; gap: 8px;
  padding: 6px 12px; font-size: 12.5px;
  border-bottom: 1px dotted rgba(30, 42, 31, .8);
}
.arow:last-child { border-bottom: 0; }
.ahead { color: var(--dim); font-size: 11px; letter-spacing: .12em; }
.dep.up   { color: var(--amber); }
.dep.down { color: var(--cool); }

@media (max-width: 640px) {
  .arow { grid-template-columns: 1fr 1fr 1fr; }
  .arow span:first-child { grid-column: 1 / -1; color: var(--ink); }
  .ahead span:first-child { display: none; }
}

/* ---------- phase 6: imagery ---------- */

.media-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.media { margin: 0; background: var(--panel); border: 1px solid var(--line); padding: 8px; }
.media img {
  display: block; width: 100%; height: auto; max-width: 100%;
  background: #050805; border: 1px solid var(--line);
}
.media figcaption { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 8px 4px 2px; }
.media-label { color: var(--green); font-size: 12.5px; letter-spacing: .08em; }
.media-cap { color: var(--ink); font-size: 12px; }
.media-meta { color: var(--dim); font-size: 11.5px; margin-left: auto; }

@media (min-width: 800px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phase 7: space, air, water ---------- */

.space-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel .legend + .eyebrow { margin-top: 18px; }

.band-table { background: var(--panel); border: 1px solid var(--line); }
.brow {
  display: grid; grid-template-columns: 3.2em 130px 5.5em 1fr; gap: 10px;
  align-items: center; padding: 5px 12px; font-size: 12.5px;
  border-bottom: 1px dotted rgba(30, 42, 31, .8);
}
.brow:last-child { border-bottom: 0; }
.bname { color: var(--amber); }
.bbar .chart { width: 130px; height: auto; }
.bword { letter-spacing: .04em; }
.s-green-t { color: var(--green); }
.s-cool-t  { color: var(--cool); }
.s-alert-t { color: var(--alert); }
.s-dim-t   { color: var(--dim); }
.bnote { color: var(--dim); font-size: 11.5px; }
.bar.s-green { fill: var(--green); }
.bar.s-alert { fill: var(--alert); }

.aqi-head { display: flex; align-items: center; gap: 16px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--dim); padding: 12px 16px; margin-bottom: 14px; }
.aqi-val { margin: 0; font-size: 46px; line-height: 1; font-weight: 600; color: var(--ink); }
.aqi-cat { margin: 0; font-size: 15px; color: var(--ink); }
.aqi-advice { margin: 2px 0 0; font-size: 12.5px; color: var(--dim); }
.aqi-good      { border-left-color: var(--green); }
.aqi-good .aqi-val, .aqi-good .aqi-cat { color: var(--green); }
.aqi-moderate  { border-left-color: var(--amber); }
.aqi-moderate .aqi-val, .aqi-moderate .aqi-cat { color: var(--amber); }
.aqi-usg       { border-left-color: var(--alert); }
.aqi-usg .aqi-val, .aqi-usg .aqi-cat { color: var(--alert); }
.aqi-unhealthy, .aqi-very, .aqi-hazardous { border-left-color: var(--alert); }
.aqi-unhealthy .aqi-val, .aqi-very .aqi-val, .aqi-hazardous .aqi-val,
.aqi-unhealthy .aqi-cat, .aqi-very .aqi-cat, .aqi-hazardous .aqi-cat { color: var(--alert); }

@media (max-width: 640px) {
  .brow { grid-template-columns: 3.2em 1fr 5.5em; }
  .bnote { grid-column: 1 / -1; }
  .bbar .chart { width: 100%; }
}

/* ---------- phase 8: planetarium ---------- */

.sky-up   { fill: #0a1018; }
.sky-down { fill: #070a07; }
.gmaj     { stroke: #2a3a2b; }
.axis-title { fill: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; }

.track     { fill: none; stroke-width: 1.4; opacity: .85; }
.track-down{ opacity: .22; stroke-dasharray: 3 3; }
.hourdot   { stroke: none; opacity: .9; }
.hourlbl   { font-family: var(--mono); font-size: 8.5px; opacity: .85; }
.objlbl    { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; }
.objlbl.below, .obj.below, .ray.below, .ring.below { opacity: .3; }

.obj      { stroke: none; }
.obj-dark { fill: #10160f; }
.obj-edge { fill: none; stroke: #3a4a3b; stroke-width: .8; }
.ray      { stroke-width: 1.2; opacity: .8; }
.ring     { fill: none; stroke-width: 1.4; opacity: .85; }
.belt     { stroke: rgba(0, 0, 0, .35); stroke-width: 1; }

/* One color per body, used for the glyph, its track and its table row. */
.p-sun,     .p-sun-t     { fill: #f5c451; stroke: #f5c451; color: #f5c451; }
.p-moon,    .p-moon-t    { fill: #e6ede7; stroke: #cfd8d0; color: #cfd8d0; }
.p-mercury, .p-mercury-t { fill: #b8b2a6; stroke: #b8b2a6; color: #b8b2a6; }
.p-venus,   .p-venus-t   { fill: #f2e6c2; stroke: #f2e6c2; color: #f2e6c2; }
.p-mars,    .p-mars-t    { fill: #e0663f; stroke: #e0663f; color: #e0663f; }
.p-jupiter, .p-jupiter-t { fill: #d9a96b; stroke: #d9a96b; color: #d9a96b; }
.p-saturn,  .p-saturn-t  { fill: #e3cf95; stroke: #e3cf95; color: #e3cf95; }
.p-uranus,  .p-uranus-t  { fill: #8fd4d9; stroke: #8fd4d9; color: #8fd4d9; }
.p-neptune, .p-neptune-t { fill: #6f8fe0; stroke: #6f8fe0; color: #6f8fe0; }
.objlbl.p-sun, .objlbl.p-moon, .objlbl.p-mercury, .objlbl.p-venus,
.objlbl.p-mars, .objlbl.p-jupiter, .objlbl.p-saturn, .objlbl.p-uranus,
.objlbl.p-neptune, .hourlbl { stroke: none; }
.track { fill: none; }

.sky-table { background: var(--panel); border: 1px solid var(--line); margin-top: 12px; }
.srow {
  display: grid; grid-template-columns: 1.1fr 1.1fr .9fr 1.1fr .9fr; gap: 8px;
  padding: 5px 12px; font-size: 12.5px;
  border-bottom: 1px dotted rgba(30, 42, 31, .8);
}
.srow:last-child { border-bottom: 0; }
.srow-down { color: var(--dim); }
.shead { color: var(--dim); font-size: 11px; letter-spacing: .12em; }
.sname { letter-spacing: .04em; }

@media (max-width: 640px) {
  .srow { grid-template-columns: 1fr 1fr 1fr; }
  .srow span:nth-child(4), .srow span:nth-child(5) { display: none; }
}

/* ---------- phase 9: planetarium filters, focus, small bodies ---------- */

/* The toggles are real checkboxes, hidden off screen; the chips are their
   labels. Checked state drives the sibling selectors below, so filtering
   needs no JavaScript. */
.pl-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.pl-hint { color: var(--dim); font-size: 11px; letter-spacing: .16em; margin-right: 2px; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim);
  padding: 4px 10px; font-size: 12px; letter-spacing: .04em; user-select: none;
}
.pl-chip:hover { border-color: var(--dim); color: var(--ink); }
.pl-swatch { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .55; }
.pl-count { color: var(--dim); font-size: 10.5px; }

.pl-toggle:checked + .pl-filters .pl-chip,
.pl-toggle:checked ~ .pl-filters .pl-chip { }
#pl-sun:checked    ~ .pl-filters .chip-sun    { color: #f5c451; border-color: #f5c451; background: rgba(245,196,81,.10); }
#pl-moon:checked   ~ .pl-filters .chip-moon   { color: #cfd8d0; border-color: #cfd8d0; background: rgba(207,216,208,.10); }
#pl-planet:checked ~ .pl-filters .chip-planet { color: var(--amber); border-color: var(--amber); background: rgba(240,180,90,.10); }
#pl-comet:checked  ~ .pl-filters .chip-comet  { color: #7fe3c2; border-color: #7fe3c2; background: rgba(127,227,194,.10); }
#pl-minor:checked  ~ .pl-filters .chip-minor  { color: #c8a0e0; border-color: #c8a0e0; background: rgba(200,160,224,.10); }
#pl-satellite:checked ~ .pl-filters .chip-satellite { color: #e8834a; border-color: #e8834a; background: rgba(232,131,74,.10); }
.pl-toggle:checked ~ .pl-filters .pl-chip .pl-swatch { opacity: 1; }

/* Unchecked hides that group in the chart. */
#pl-sun:not(:checked)    ~ .chart-box .g-sun,
#pl-moon:not(:checked)   ~ .chart-box .g-moon,
#pl-planet:not(:checked) ~ .chart-box .g-planet,
#pl-comet:not(:checked)  ~ .chart-box .g-comet,
#pl-minor:not(:checked)  ~ .chart-box .g-minor,
#pl-satellite:not(:checked) ~ .chart-box .g-satellite { display: none; }

/* Focus on hover: dim everything that is not the object under the pointer.
   SVG has no z-index, so "bring to front" is done by fading the rest and
   thickening the one you are pointing at. */
.obj-group { transition: opacity .12s ease-out; }
.chart-box svg:hover .obj-group { opacity: .12; }
.chart-box svg .obj-group:hover { opacity: 1; }
.chart-box svg .obj-group:hover .track { stroke-width: 2.6; opacity: 1; }
.chart-box svg .obj-group:hover .track-down { opacity: .55; }
.chart-box svg .obj-group:hover .objlbl { font-size: 12px; font-weight: 600; }
.chart-box svg .obj-group:hover .hourlbl { opacity: 1; }

/* Invisible pointer targets: a 1.4px path cannot be hovered on purpose. */
.track-hit { fill: none; stroke: transparent; stroke-width: 9; pointer-events: stroke; }
.obj-hit   { fill: transparent; pointer-events: fill; }

.p-comet, .p-comet-t { fill: #7fe3c2; stroke: #7fe3c2; color: #7fe3c2; }
.p-minor, .p-minor-t { fill: #c8a0e0; stroke: #c8a0e0; color: #c8a0e0; }
/* Orange: nothing else on this chart uses it, and a satellite pass is
   not the same kind of object as everything else plotted here. */
.p-satellite, .p-satellite-t { fill: #e8834a; stroke: #e8834a; color: #e8834a; }
.tail { stroke: none; opacity: .38; }

@media (prefers-reduced-motion: reduce) {
  .obj-group { transition: none; }
}

/* ---------- events panel ---------- */

.ev-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ev {
  display: grid; grid-template-columns: 5.5em 1fr auto; gap: 10px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--dim);
  padding: 8px 12px; font-size: 13px;
}
.ev-conjunction { border-left-color: var(--cool); }
.ev-opposition  { border-left-color: var(--amber); }
.ev-elongation  { border-left-color: var(--green); }
.ev-approach    { border-left-color: #c8a0e0; }
.ev-when { color: var(--dim); font-size: 12px; }
.ev-title { color: var(--ink); }
.ev-detail { color: var(--dim); font-size: 12px; }
.ev-in { color: var(--green); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 640px) {
  .ev { grid-template-columns: 1fr auto; }
  .ev-when { grid-column: 1 / -1; }
}

/* ---------- alert banners, directly under the location heading ---------- */

.alert-stack { display: grid; gap: 10px; margin: 4px 0 20px; }

.wxbanner {
  border: 1px solid var(--line); border-left-width: 4px;
  background: var(--panel); padding: 12px 14px;
  color: var(--ink);
}
.wxbanner-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.wxbanner-kind {
  font-size: 10px; letter-spacing: .18em; padding: 3px 8px;
  color: var(--bg); font-weight: 700; white-space: nowrap;
}
.wxbanner-body { min-width: 0; }
.wxbanner-event { margin: 0; font-size: 16px; letter-spacing: .02em; }
.wxbanner-head { margin: 3px 0 0; font-size: 13px; color: var(--ink); }
.wxbanner-meta { margin: 3px 0 0; font-size: 11.5px; color: var(--dim); }
.wxbanner-inst {
  margin: 10px 0 0; font-size: 13px; color: var(--ink);
  border-left: 2px solid var(--line); padding-left: 10px;
}
.wxbanner-full { margin: 10px 0 0; border-top: 1px dotted var(--line); }
.wxbanner-full > summary { font-size: 11.5px; letter-spacing: .12em; }
.wxbanner-p { margin: 6px 0 0; font-size: 12.5px; color: var(--dim); max-width: 80ch; }

/* Red for a warning, orange for a watch, amber for an advisory. */
.wx-emergency { border-left-color: #ff3b2f; color: #ff3b2f; background: rgba(255, 59, 47, .07); }
.wx-emergency .wxbanner-kind { background: #ff3b2f; }
.wx-emergency .wxbanner-event { color: #ff6a5c; }

.wx-warning { border-left-color: #e8503a; color: #e8503a; background: rgba(232, 80, 58, .06); }
.wx-warning .wxbanner-kind { background: #e8503a; }
.wx-warning .wxbanner-event { color: #f0705c; }

.wx-watch { border-left-color: #f08a3c; color: #f08a3c; background: rgba(240, 138, 60, .06); }
.wx-watch .wxbanner-kind { background: #f08a3c; }
.wx-watch .wxbanner-event { color: #f0a05c; }

.wx-advisory { border-left-color: var(--amber); color: var(--amber); }
.wx-advisory .wxbanner-kind { background: var(--amber); }
.wx-advisory .wxbanner-event { color: var(--amber); }

.wx-statement, .wx-alert { border-left-color: var(--dim); color: var(--dim); }
.wx-statement .wxbanner-kind, .wx-alert .wxbanner-kind { background: var(--dim); }
.wx-statement .wxbanner-event, .wx-alert .wxbanner-event { color: var(--ink); }

@media (max-width: 640px) {
  .wxbanner-top { grid-template-columns: 1fr; gap: 6px; }
  .wxbanner-kind { justify-self: start; }
}

/* ---------- precipitation nowcast line ---------- */

.nowcast {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 13.5px; color: var(--ink);
}
.nowcast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.nowcast-active .nowcast-dot { background: var(--cool); }
.nowcast-active { color: var(--cool); }
.nowcast-coming .nowcast-dot { background: var(--amber); }
.nowcast-coming { color: var(--amber); }
.nowcast-dry { color: var(--dim); }



/* The per-body color classes set both fill and stroke, which is what the
   glyphs need. Tracks share those classes for their stroke color, so the
   fill has to be cleared again after them or a 24 hour track paints as a
   filled region across the whole chart. Keep this last. */
.track, .track-hit { fill: none; }
.hourlbl, .objlbl { stroke: none; }

/* ---------- phase 10: flood stages, quakes, fires ---------- */

.flood { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--green);
  padding: 10px 14px; margin: 0 0 14px; }
.flood-none     { border-left-color: var(--green); }
.flood-action   { border-left-color: var(--amber); }
.flood-minor    { border-left-color: #f08a3c; }
.flood-moderate { border-left-color: #e8503a; }
.flood-major    { border-left-color: #ff3b2f; }
.flood-state { margin: 0 0 8px; font-size: 14px; color: var(--ink); letter-spacing: .04em; }
.flood-none .flood-state { color: var(--green); }
.flood-action .flood-state { color: var(--amber); }
.flood-minor .flood-state, .flood-moderate .flood-state, .flood-major .flood-state { color: #f08a3c; }
.flood-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.flood-step { border: 1px solid var(--line); padding: 3px 9px; font-size: 11.5px; color: var(--dim); }
.flood-step b { color: var(--ink); font-weight: 600; }
.flood-step.reached { border-color: var(--alert); color: var(--alert); }
.flood-note { margin: 8px 0 0; font-size: 12px; color: var(--dim); }

.quake-list { display: grid; gap: 6px; margin-bottom: 14px; }
.quake {
  display: grid; grid-template-columns: 3.6em 1fr auto; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dim);
  padding: 8px 12px;
}
.qmag { font-size: 19px; font-weight: 600; text-align: center; }
.qplace { font-size: 13px; color: var(--ink); }
.qdetail { font-size: 11.5px; color: var(--dim); }
.qwhen { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.q-minor    { border-left-color: var(--dim); }
.q-minor .qmag { color: var(--dim); }
.q-light    { border-left-color: var(--cool); }
.q-light .qmag { color: var(--cool); }
.q-moderate { border-left-color: var(--amber); }
.q-moderate .qmag { color: var(--amber); }
.q-strong   { border-left-color: #f08a3c; }
.q-strong .qmag { color: #f08a3c; }
.q-major    { border-left-color: #ff3b2f; background: rgba(255, 59, 47, .06); }
.q-major .qmag { color: #ff3b2f; }

@media (max-width: 640px) {
  .quake { grid-template-columns: 3.2em 1fr; }
  .qwhen { grid-column: 2; }
}

/* ---------- location marker on bbox-aware imagery ---------- */

.media-frame { position: relative; line-height: 0; }
.media-frame img { position: relative; z-index: 0; }

/* Both overlays stretch to the image box, so the SVG viewBox of 0..100
   maps directly onto percentages of the image. preserveAspectRatio is
   none for exactly that reason: we want the distortion. */
.media-pin, .media-dot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.pin-x, .pin-y { stroke: var(--amber); stroke-width: .18; stroke-dasharray: 2 2; opacity: .75; }
.pin-halo { fill: none; stroke: var(--amber); stroke-width: .5; opacity: .9; }
.pin-dot  { fill: var(--amber); }
.media-pin-label {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: rgba(11, 15, 12, .82); border: 1px solid var(--amber);
  color: var(--amber); font-size: 10.5px; letter-spacing: .12em; padding: 2px 7px; line-height: 1.4;
}

/* A network outage fails every source at once, so the problems collapse
   into one line rather than one banner each. */
.banner-errors { padding: 8px 14px; }
.banner-errors > summary { color: var(--alert); font-size: 12.5px; letter-spacing: .04em; }
.banner-errors > summary:hover { color: var(--amber); }
.err-line { margin: 6px 0 0; font-size: 12px; color: var(--dim); }

/* ---------- wind streamline map ---------- */

.wind-bg { fill: #070c09; }

/* Speed classes set stroke only. Giving them a fill as well would turn
   every streamline into a filled blob, which is exactly what happened
   the first time. Heads use the matching -f classes below. */
.w-calm     { stroke: #4a6b52; }
.w-light    { stroke: #5dd97c; }
.w-moderate { stroke: #8fd4d9; }
.w-fresh    { stroke: var(--amber); }
.w-strong   { stroke: var(--alert); }
.w-calm-f     { fill: #4a6b52; }
.w-light-f    { fill: #5dd97c; }
.w-moderate-f { fill: #8fd4d9; }
.w-fresh-f    { fill: var(--amber); }
.w-strong-f   { fill: var(--alert); }

.stream { fill: none; stroke-width: 1.1; stroke-linecap: round; opacity: .8; }
.stream.w-fresh, .stream.w-strong { stroke-width: 1.5; opacity: 1; }
.stream-head { stroke: none; }
.wind-label {
  fill: var(--amber); stroke: none; font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em;
}