/* ============================================================
   WU test link
   Styles the Weather Underground test link.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */
.wu-test-button{display:inline-block;border:1px solid #5a8ea9;border-radius:8px;padding:9px 12px;color:inherit;text-decoration:none;background:#183449}

/* ============================================================
   WU settings buttons
   Aligns station settings and action buttons across screen sizes.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */
.wu-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;grid-column:1/-1}.wu-actions button,.wu-actions a{box-sizing:border-box;width:100%;min-height:42px;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:8px;padding:10px;border:1px solid #5a8ea9;background:#183449;color:#eaf4ff;text-decoration:none}.wu-actions [hidden]{display:none}.settings #saveStation{width:100%;box-sizing:border-box}.wu-actions a,.wu-actions button{font:inherit;white-space:nowrap}@media(max-width:700px){.wu-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.settings #saveStation{width:100%}.wu-actions a,.wu-actions button{white-space:normal}}

/* ============================================================
   Assessment borders
   Colours observing assessment borders by risk level.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */
.current-forecast-extras{margin-top:14px;display:grid;gap:12px}.current-forecast-extras div{border-top:1px solid #38536a;padding-top:9px}.current-forecast-extras strong{margin:0 7px}#observingAssessment[data-level="red"]{border:2px solid #f04452}#observingAssessment[data-level="amber"]{border:2px solid #dca33d}#observingAssessment[data-level="green"]{border:2px solid #38a46e}.wu-actions{width:100%}.wu-actions>*{min-width:0}

/* ============================================================
   Dashboard and monitor layout
   Controls settings columns, monitor layout, live metrics, alerts and risk colours.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

.settings{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.settings>label{min-width:0}.wu-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.wu-actions>*{width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}.monitor-links{display:flex;gap:15px;flex-wrap:wrap}.monitor-links a{color:#8fceff}.live-metrics strong.risk-amber{color:#ffd36a!important}.live-metrics strong.risk-red{color:#ff6370!important}.live-metrics strong.risk-green{color:#6de1a6!important}.live-metrics strong.risk-unknown{color:#a8b3c0!important}.live-alerts.alert-danger{border:2px solid #ff5262!important;background:#451824!important}.live-alerts.alert-amber{border:2px solid #e7ad44!important}.live-metrics .extra-tile{border:1px solid #38536a}.monitor-only header,.monitor-only .eyebrow,.monitor-only main>h1,.monitor-only main>p,.monitor-only main>section:not(#liveDashboard),.monitor-only main>.grid,.monitor-only main>footer{display:none!important}.monitor-only #liveDashboard{max-width:1200px;margin:14px auto}.monitor-only #monitorBack{display:inline!important}.monitor-only .monitor-links>a:first-child{display:none}.monitor-only main{max-width:1280px!important}.monitor-only .live-metrics{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}@media(max-width:700px){.settings{grid-template-columns:1fr!important}.wu-actions{grid-template-columns:1fr!important}}
@media(min-width:1040px){.monitor-only .live-metrics{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(min-width:700px) and (max-width:1039px){.monitor-only .live-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:699px){.monitor-only .live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.monitor-only .live-metrics>div{min-width:0;overflow-wrap:anywhere}
.refresh-help-link{font-size:12px!important;opacity:.75;text-decoration:underline;text-underline-offset:2px}.refresh-help-link:hover{opacity:1}

/* ============================================================
   Dashboard tiles and chart overview
   Controls live dashboard grids, assessment tiles and clear-sky overview.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

/* Main and monitor: six readable columns on desktop, adaptive elsewhere. */
@media(min-width:1040px){.live-dashboard .live-metrics{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(min-width:700px) and (max-width:1039px){.live-dashboard .live-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:699px){.live-dashboard .live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.live-dashboard .live-metrics>div{min-width:0;overflow-wrap:anywhere}
#observingAssessment .assessment-forecast{margin-top:14px;border-top:1px solid #38536a;padding-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#observingAssessment .assessment-forecast>div{background:#0d2132;border:1px solid #365168;border-radius:10px;padding:12px;min-width:0}
#observingAssessment .assessment-forecast h3{font-size:.9rem;margin:0 0 8px;color:#c8d9e7}
#observingAssessment .assessment-forecast strong{font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.25;margin:0 0 6px}
#observingAssessment .assessment-forecast small{font-size:.78rem;overflow-wrap:anywhere}
#observingAssessment .assessment-forecast .condition-tag{float:none;display:inline-block;margin-left:7px}
@media(max-width:700px){#observingAssessment .assessment-forecast{grid-template-columns:1fr}}
.clear-chart-scroll{overflow:visible!important;max-width:100%;padding:10px!important}
#clearChart{min-height:0!important}
.clear-overview{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:2px;width:100%}
.clear-overview .clear-hour{min-width:0;min-height:114px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border-radius:3px;background:#172b3b;position:relative;padding:5px 0 4px;cursor:help}
.clear-overview .clear-hour.night{background:#081724}
.clear-overview .clear-hour .clear-bar-track{flex:1;min-height:65px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.clear-overview .clear-hour .clear-bar{width:80%;min-height:2px;border-radius:2px 2px 0 0}
.clear-overview .clear-hour .clear-label{font-size:clamp(7px,.7vw,11px);line-height:1.1;color:#c7d9e8;white-space:nowrap}
.clear-overview .clear-hour .clear-date{font-size:clamp(7px,.65vw,10px);color:#a6c6df;white-space:nowrap}
.clear-overview-legend{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.75rem;margin-bottom:8px;color:#b9cbdc}
@media(max-width:700px){.clear-overview{gap:1px}.clear-overview .clear-hour{min-height:90px;padding:3px 0}.clear-overview .clear-hour .clear-label{font-size:6px}.clear-overview .clear-hour .clear-date{font-size:6px}}


/* ============================================================
   48-hour timeline
   Defines the two-row timeline and its mobile layout.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

/* Two fixed 24-hour rows: never overflow the forecast panel. */
.clear-chart-scroll{overflow:hidden!important;box-sizing:border-box;width:100%;padding:8px!important}
#clearChart{width:100%;max-width:100%;min-width:0;overflow:hidden}
.wjm-timeline{display:grid;gap:13px;min-width:0;width:100%}
.wjm-timeline-row{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
.wjm-timeline-heading{font-size:.8rem;font-weight:700;color:#bcd2e5}
.wjm-timeline-hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;min-width:0;width:100%}
.wjm-timeline-hour{position:relative;min-width:0;height:70px;border-radius:3px;display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:help;box-sizing:border-box;border:1px solid rgba(255,255,255,.13)}
.wjm-timeline-hour.daylight{opacity:.38}
.wjm-timeline-hour.twilight{opacity:.67}
.wjm-timeline-hour .wjm-time{font-size:clamp(8px,.75vw,12px);color:#fff;font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);line-height:1;white-space:nowrap}
.wjm-timeline-hour.midnight{border-left:3px solid #d5e8f7}
.wjm-timeline-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.76rem;color:#bcd2e5}
.wjm-timeline-legend span{display:inline-flex;align-items:center;gap:5px}
.wjm-timeline-legend i{display:inline-block;width:11px;height:11px;border-radius:2px}
@media(max-width:650px){.wjm-timeline-hour{height:55px}.wjm-timeline-hours{gap:1px}.wjm-timeline-hour .wjm-time{font-size:7px}.wjm-timeline-heading{font-size:.72rem}}


/* ============================================================
   Location and sky events
   Styles the compact location picker and sky-event cards.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */
.location-compact{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.location-compact span{flex:1;color:#bcd2e5;min-width:120px}.location-compact button{margin-left:auto}.location-compact strong{font-size:1.1rem}.sky-events-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sky-events-grid article{border:1px solid #38536a;background:#0d2132;border-radius:10px;padding:14px;min-width:0}.sky-events-grid h3{margin-top:0}.sky-events-grid a{color:#8fceff}@media(max-width:700px){.sky-events-grid{grid-template-columns:1fr}}#locationDetails[hidden]{display:none!important}

/* ============================================================
   Full-width observing monitor
   Lets the separate monitor view fill the desktop width.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

/* Only the separate Observing Monitor view; leave the main page unchanged. */
@media (min-width: 1040px) {
  body.monitor-only main {width:100%!important;max-width:none!important;margin:0!important;padding:16px 18px!important;box-sizing:border-box!important;}
  body.monitor-only #liveDashboard {width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box!important;}
}
body.monitor-only .monitor-f11-tip{display:inline!important;}
@media (max-width: 1039px){body.monitor-only .monitor-f11-tip{display:none!important;}}


/* ============================================================
   Alert bar layout
   Controls the compact alert banner, buttons and mobile wrapping.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

.live-alerts{display:flex!important;flex-direction:column!important;gap:5px!important;padding:10px 13px!important;align-items:stretch!important}
.live-alerts .alert-top{display:flex!important;align-items:center!important;gap:9px!important;flex:1 1 auto;min-width:0}
.live-alerts .alert-top>strong{font-size:18px!important;white-space:nowrap;line-height:1.25;margin:0!important;display:inline-flex;align-items:center;gap:5px}
.live-alerts .alert-message{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:13px}
.live-alerts #alertWeatherIcon{font-size:17px;line-height:1;flex-shrink:0}
.live-alerts .alert-controls{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;flex-wrap:nowrap!important;padding:0!important;margin:0!important;border:0!important}
.live-alerts .sound-label{display:inline-flex!important;align-items:center!important;gap:5px!important;margin:0!important;white-space:nowrap;font-size:12px!important}
.live-alerts #soundAlerts{width:16px!important;height:16px!important;accent-color:#3187ff;margin:0!important}
.live-alerts #testAlertSound,.live-alerts #dismissWeatherAlert{box-sizing:border-box!important;min-width:112px!important;width:112px!important;height:36px!important;min-height:36px!important;padding:6px 8px!important;font-size:12px!important;line-height:1.2!important;margin:0!important;text-align:center!important;white-space:nowrap}
.live-alerts #testAlertStatus{font-size:11px;opacity:.85;max-width:85px} .live-alerts #dismissWeatherAlert[hidden]{display:none!important}
.live-alerts .alert-note{display:block!important;opacity:.72;line-height:1.25!important;font-size:11px!important;margin:0!important}
@media(min-width:850px){.live-alerts{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px!important;row-gap:4px!important}.live-alerts .alert-top{grid-column:1;grid-row:1}.live-alerts .alert-controls{grid-column:2;grid-row:1}.live-alerts .alert-note{grid-column:1/-1;grid-row:2}}
@media(max-width:849px){.live-alerts .alert-top{flex-wrap:wrap!important}.live-alerts .alert-controls{justify-content:flex-start!important;flex-wrap:wrap!important}}


/* ============================================================
   Alert controls and outlook heading
   Uses regular-weight alert buttons and aligns the outlook badge.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */

/* Compact, regular-weight alert controls. */
.live-alerts #testAlertSound,.live-alerts #dismissWeatherAlert{font-weight:400!important;font-family:inherit!important}
.live-alerts .sound-label{font-weight:400!important}
/* Match other panel headers: status at the right edge. */
.grid>section:first-child>h2{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.grid>section:first-child>h2 #outlook{margin-left:auto!important;flex-shrink:0!important}


/* ============================================================
   Dew warning risk colours
   Sets high, moderate and low dew risk panel colours.
   Originally embedded in astro-weather.html; retained in order.
   ============================================================ */
#dewPanel[data-dew-risk="high"]{border:2px solid #f04452!important}#dewPanel[data-dew-risk="high"] #dew{color:#ff9ca6!important}#dewPanel[data-dew-risk="high"] #dewRating{background:#752b39!important;color:#fff!important}#dewPanel[data-dew-risk="moderate"]{border:2px solid #dca33d!important}#dewPanel[data-dew-risk="moderate"] #dewRating{background:#614b20!important;color:#fff!important}#dewPanel[data-dew-risk="low"]{border:2px solid #38a46e!important}

/* ============================================================
   V3.0.7: Assessment badge colours
   Matches the badge background to the assessment panel data-level.
   ============================================================ */
#observingAssessment[data-level="red"] #monitorBadge {background:#8b2635!important;color:#fff!important;}
#observingAssessment[data-level="amber"] #monitorBadge {background:#805a16!important;color:#fff!important;}
#observingAssessment[data-level="green"] #monitorBadge {background:#176443!important;color:#fff!important;}

/* ============================================================
   V3.0.7: Regular-weight condition badges
   Applies to GOOD / MARGINAL / POOR and assessment status labels;
   panel headings and numeric readings remain bold.
   ============================================================ */
.condition-tag, #monitorBadge, .pill {font-weight:400!important;}

/* ============================================================
   V3.0.8 - Realistic NASA Moon imagery
   Replaces the artificial CSS phase disc visually; existing phase
   calculations and the phase label remain intact. NASA lunar surface
   renderings show genuine mapped craters/maria (not photographs).
   ============================================================ */
.moon-phase #moonDisc {position:relative!important;isolation:isolate;overflow:hidden!important;background:none!important;box-shadow:none!important;border:none!important;border-radius:50%!important;}
.moon-phase #moonDisc::before {content:none!important;}
.moon-phase #moonDisc::after {content:"";position:absolute;inset:0;z-index:10;background-image:var(--nasa-moon-image,none);background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none;}
.moon-phase #moonDisc[data-nasa-moon="new"]::after {background-image:none;background-color:#101d2b;border-radius:50%;box-shadow:inset 0 0 0 1px #2b3b4b;}

/* ============================================================
   V3.0.9 - Moon photo display fix
   The old CSS disc used pseudo-elements to draw an artificial shadow.
   Hide BOTH old layers, and show the actual NASA image as an <img>.
   No other weather or astronomy panels are affected.
   ============================================================ */
.moon-phase #moonDisc {
  position:relative!important; overflow:hidden!important;
  background:transparent!important; background-image:none!important;
  border:0!important; box-shadow:none!important; border-radius:50%!important;
}
.moon-phase #moonDisc::before, .moon-phase #moonDisc::after {
  content:none!important; display:none!important; background:none!important;
}
.moon-phase #moonDisc .nasa-moon-photo {
  display:block; width:100%; height:100%; object-fit:contain;
  border:0; border-radius:50%; background:transparent;
}
.moon-phase #moonDisc[data-nasa-moon="new"] {background:#101d2b!important;}

/* ============================================================
   V3.1.0 - NASA lunar image credit
   Small, unobtrusive attribution under the phase label.
   Images are cached by assets/moon-cache.php on first request.
   ============================================================ */
.moon-phase .moon-nasa-credit {display:block;max-width:190px;text-align:center;font-size:10px;line-height:1.4;color:#9eb4c5;margin:5px auto 0;font-weight:400;}
.moon-phase .moon-nasa-credit a {color:#9dcfff;text-decoration:underline;text-underline-offset:2px;}

/* ============================================================
   V3.1.2 - Permanent NASA Moon display
   The legacy #moonDisc stays in the DOM for astronomy calculations,
   but cannot be displayed or cover the independent NASA image.
   ============================================================ */
.moon-phase #moonDisc {display:none!important;}
.moon-phase .nasa-moon-display {
  display:block; width:72px; height:72px; margin:0 auto;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  background:transparent!important; overflow:visible!important;
}
.moon-phase .nasa-moon-display::before,
.moon-phase .nasa-moon-display::after {content:none!important;display:none!important;}
.moon-phase .nasa-moon-display img {
  display:block; width:100%; height:100%; object-fit:contain;
  border:0!important; box-shadow:none!important; background:transparent!important;
}
.moon-phase .nasa-moon-display img[hidden] {display:none!important;}
.moon-phase .nasa-moon-display[data-phase="new"] {border-radius:50%!important;background:#152536!important;}

/* ============================================================
   V3.1.5 - Moon presentation only
   Increase displayed Moon by ~14% (72px -> 82px).
   NASA source JPEGs contain black square backgrounds. Screen
   blending makes black pixels take the panel background colour
   without modifying the Moon source, cache, or phase calculations.
   ============================================================ */
.moon-phase .nasa-moon-display {
  width:82px!important;
  height:82px!important;
  background:transparent!important;
}
.moon-phase .nasa-moon-display img {
  mix-blend-mode:screen!important;
  background:transparent!important;
}

/* ============================================================
   V3.1.6 - Moon alignment and size only
   Align the top of the image with the Sun and Moon heading.
   Keep the phase label level with the explanatory text.
   Existing NASA blending, cache and astronomy logic are unchanged.
   ============================================================ */
.moon-phase .nasa-moon-display {
  width:90px!important;
  height:90px!important;
  position:relative;
  top:-32px;
}
.moon-phase #moonPhaseLabel {
  position:relative;
  top:-8px;
}
.moon-phase .moon-nasa-credit {
  position:relative;
  top:-8px;
}

/* ============================================================
   V3.1.7 - Restore Moon image blending at 90px.
   Moving the image with transform creates a stacking context and
   can prevent mix-blend-mode:screen blending with the panel.
   Use relative positioning instead, and preserve screen blending.
   ============================================================ */
.moon-phase .nasa-moon-display {transform:none!important; position:relative!important; top:-32px!important;}
.moon-phase .nasa-moon-display img {mix-blend-mode:screen!important; background:transparent!important;}

/* ============================================================
   V3.1.8 - Bortle button / dropdown spacing
   Give the Fetch button breathing room before the override label.
   ============================================================ */
.bortle-panel #fetchBortle {margin-bottom:12px!important;}

/* V3.1.9 - Consistent adjacent panel sizing on desktop. */
@media (min-width:701px) {
  #observingAssessment, .station-panel { min-height: 325px; box-sizing: border-box; }
}