:root{color-scheme:dark;--bg:#0a0c0f;--card:#151920;--muted:#9aa4b2;--line:#262c36;--good:#163c2a;--warn:#4b3b13;--bad:#4b1f24}
*{box-sizing:border-box}body{margin:0;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);background:var(--bg);color:#f6f7f9;font:16px/1.48 system-ui,-apple-system,Segoe UI,sans-serif}
main{width:min(2200px,calc(100vw - 36px));margin:max(18px,calc(env(safe-area-inset-top) + 8px)) auto 70px}header,.section-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{margin:0;font-size:34px;letter-spacing:-.8px}.header-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}.header-title p{margin:0;color:var(--muted)}.header-separator{color:var(--muted);font-weight:700;font-size:18px}
button{border:1px solid var(--line);background:#1e242d;color:#fff;border-radius:11px;padding:9px 13px;font-weight:650}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px;margin-bottom:14px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:18px}.label,.section-title,.chart-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.temp{font-size:64px;font-weight:780;line-height:1;margin:8px 0}.hero-right{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-right div{min-width:100px;border-left:1px solid var(--line);padding-left:14px}.hero-right b{display:block;font-size:23px}.hero-right span,.status span,.details span{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid .card{margin:0 0 14px}.status strong,.details strong,.travel-window strong{display:block;font-size:20px;margin-top:6px}.status small{display:block;color:var(--muted);margin-top:6px}
.good{background:linear-gradient(180deg,var(--good),var(--card))}.warn{background:linear-gradient(180deg,var(--warn),var(--card))}.bad{background:linear-gradient(180deg,var(--bad),var(--card))}
.period{padding:13px 0;border-top:1px solid var(--line)}.period:first-child{border-top:0}.alert{border-left:4px solid #d95b65;padding:10px 12px;margin:8px 0;background:#111419;border-radius:8px}
.muted{color:var(--muted)}.travel-window strong{font-size:26px}.seg{display:flex;gap:6px}.seg button{padding:6px 10px}.seg button.active{background:#394352}.chart-label{margin:17px 0 4px}canvas{width:100%;background:#101318;border-radius:10px}
footer{color:var(--muted);font-size:12px;text-align:center;margin-top:20px}
@media(max-width:760px){main{width:min(96vw,700px);margin-top:14px}.hero{align-items:flex-start;flex-direction:column}.hero-right{width:100%}.grid{grid-template-columns:1fr 1fr}.temp{font-size:54px}h1{font-size:29px}.hero-right b{font-size:20px}.status-grid .card{min-height:132px}.header-title{gap:7px}.header-title p{font-size:14px}.header-separator{font-size:16px}}

.road-summary{font-size:18px;font-weight:700;margin:8px 0 14px}.road-subhead{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:16px 0 6px}.road-item{padding:10px 0;border-top:1px solid var(--line)}.road-item:first-of-type{border-top:0}
@supports(padding:max(0px)){body{padding-top:max(env(safe-area-inset-top),0px)}}
@media(max-width:760px){header{padding-top:6px}main{margin-top:12px}}

/* Hide completed PWA setup card without removing DOM elements needed by JS */
.pwa {display:none !important}

/* Astronomy */
.astro-card{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(82,101,180,.24),transparent 28%),linear-gradient(180deg,#12182a 0%,#10141d 58%,#13171d 100%);border-color:#303a59;box-shadow:0 14px 32px rgba(0,0,0,.22)}
.astro-card:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 10% 16%,rgba(255,255,255,.75) 0 1px,transparent 1.4px),radial-gradient(circle at 23% 38%,rgba(255,255,255,.55) 0 1px,transparent 1.3px),radial-gradient(circle at 55% 12%,rgba(255,255,255,.5) 0 1px,transparent 1.3px),radial-gradient(circle at 72% 31%,rgba(255,255,255,.42) 0 1px,transparent 1.3px),radial-gradient(circle at 91% 55%,rgba(255,255,255,.45) 0 1px,transparent 1.3px);opacity:.35}
.astro-card>*{position:relative}.astro-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.astro-title{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:3px}.astro-status{color:#c8d0e8;margin-top:2px}.astro-badge{border:1px solid #465173;background:#1c2540;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.06em;white-space:nowrap}.astro-excellent{background:#173f31;border-color:#2d7b59}.astro-good{background:#1f3a35;border-color:#426d62}.astro-fair{background:#4a3c19;border-color:#806a2e}.astro-poor{background:#4a2328;border-color:#7f3e47}
.astro-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.astro-metric{background:rgba(6,10,20,.48);border:1px solid rgba(105,119,165,.28);border-radius:14px;padding:12px}.astro-metric span{display:block;color:#9fa9c7;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.astro-metric strong{display:block;font-size:18px;margin-top:5px;line-height:1.25}.astro-weather{margin-top:12px;color:#c7ccda;font-size:14px}.astro-section-title{margin-top:17px;margin-bottom:4px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#cfd6ed}.astro-object{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 0;border-top:1px solid rgba(109,122,159,.23)}.astro-object:first-child{border-top:0}.astro-object-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#202a48;border:1px solid #3a466d;color:#dbe3ff;font-size:12px;font-weight:800}.astro-object b{font-size:16px}.astro-object div div{color:#d2d7e5;font-size:14px;margin-top:1px}.astro-object span{display:block;color:#8f9ab7;font-size:13px;margin-top:2px}.astro-highlight{margin-top:10px;padding:12px 13px;border-radius:13px;background:rgba(68,50,101,.35);border:1px solid #4d4567}.astro-note{margin-top:12px;color:#8f99b2;font-size:12px}
@media(max-width:760px){.astro-head{align-items:flex-start}.astro-title{font-size:25px}.astro-metrics{grid-template-columns:1fr 1fr}.astro-badge{font-size:11px;padding:7px 9px}.astro-metric strong{font-size:16px}}

/* Campground occupancy */
.occupancy-card{background:radial-gradient(circle at 92% 12%,rgba(84,126,92,.18),transparent 28%),linear-gradient(180deg,#151b18,#151920);border-color:#2d3931}.occupancy-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.occupancy-name{font-size:24px;font-weight:800;letter-spacing:-.35px;margin-top:3px}.occupancy-badge{min-width:72px;text-align:center;border:1px solid #385044;background:#183125;border-radius:999px;padding:8px 12px;font-weight:800}.occupancy-summary{font-size:20px;font-weight:750;margin-top:14px}.occupancy-private{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.occupancy-round-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.occupancy-actions{display:flex;gap:8px;flex-wrap:wrap}.occupancy-progress{font-size:13px;margin-top:2px}.occupancy-help{font-size:12px;margin-top:10px}.occupancy-sites{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:14px}.occupancy-site{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#101418}.occupancy-site-main{width:100%;min-height:82px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px}.occupancy-site-number{font-size:27px;font-weight:850;line-height:1}.occupancy-site-status{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.occupancy-site-select{width:100%;border:0;border-top:1px solid var(--line);background:#171d24;color:#dce2ea;font-size:11px;padding:6px}.occupancy-available{background:linear-gradient(180deg,rgba(24,65,45,.75),#101418);border-color:#28573e}.occupancy-occupied{background:linear-gradient(180deg,rgba(83,39,44,.78),#101418);border-color:#6a343b}.occupancy-camphost{background:linear-gradient(180deg,rgba(36,58,101,.9),#101418);border-color:#4f70b1;box-shadow:0 0 0 1px rgba(79,112,177,.18) inset}.occupancy-camphost .occupancy-site-status{color:#cddcff}.occupancy-reserved{background:linear-gradient(180deg,rgba(77,62,24,.75),#101418);border-color:#6b5b2c}.occupancy-closed{background:linear-gradient(180deg,rgba(57,58,64,.8),#101418);border-color:#4b4e57}.occupancy-unknown{background:#101418}.occupancy-message{font-size:13px;margin-top:10px;min-height:18px}.occupancy-error{color:#f0a3aa}.occupancy-actions button:disabled{opacity:.45;cursor:not-allowed}
.occupancy-site-controls{display:grid;gap:5px;padding:0 6px 6px}.occupancy-new-occupant{padding:5px 7px;border-radius:8px;font-size:10px;background:#222a34}.occupancy-stay-days{font-size:12px;font-weight:800;color:#e5e8ed}.occupancy-exempt{color:#b9c9ef;font-size:10px;letter-spacing:.03em;text-transform:uppercase}.occupancy-near-limit{background:linear-gradient(180deg,rgba(112,79,16,.92),#17140e);border-color:#b48324;box-shadow:0 0 0 1px rgba(180,131,36,.22) inset}.occupancy-overstay{background:linear-gradient(180deg,rgba(125,35,42,.96),#1c1012);border-color:#d45b67;box-shadow:0 0 0 1px rgba(212,91,103,.25) inset,0 0 18px rgba(212,91,103,.12)}.occupancy-overstay .occupancy-site-status,.occupancy-near-limit .occupancy-site-status{color:#f4e9d0}
@media(max-width:760px){.occupancy-name{font-size:21px}.occupancy-summary{font-size:18px}.occupancy-sites{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.occupancy-site-main{min-height:74px}.occupancy-site-number{font-size:25px}.occupancy-round-bar{align-items:flex-start}.occupancy-actions{width:100%}.occupancy-actions button{flex:1}}

/* Initial loading overlay */
.initial-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(54,75,112,.24),transparent 30%),rgba(10,12,15,.96);backdrop-filter:blur(8px);transition:opacity .28s ease,visibility .28s ease}
.initial-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}.initial-loader-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}.initial-loader-ring{width:54px;height:54px;border-radius:50%;border:5px solid #26303d;border-top-color:#69b8ff;border-right-color:#8b7cff;animation:dweller-spin .85s linear infinite;box-shadow:0 0 26px rgba(105,184,255,.12)}.initial-loader-title{font-size:20px;font-weight:800;letter-spacing:-.2px}.initial-loader-status{color:var(--muted);font-size:13px;letter-spacing:.02em}.initial-loader-dots::after{content:"";display:inline-block;width:1.5em;text-align:left;animation:dweller-dots 1.2s steps(4,end) infinite}
@keyframes dweller-spin{to{transform:rotate(360deg)}}@keyframes dweller-dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
@media(prefers-reduced-motion:reduce){.initial-loader-ring{animation:none;border-top-color:#69b8ff}.initial-loader-dots::after{animation:none;content:"..."}.initial-loader{transition:none}}

/* Agency insignia next to the resolved campground name. */
.header-title p#where{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;width:100%}.header-title p#where>span{min-width:0;overflow-wrap:break-word}
.agency-logo{display:inline-block;width:32px;height:32px;object-fit:contain;vertical-align:middle;flex:none}

/* Immediate feedback for manual and automatic dashboard refresh. */
#refresh{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:105px;white-space:nowrap}
#refresh.is-refreshing::before{content:"";width:14px;height:14px;display:inline-block;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:dweller-spin .8s linear infinite}
#refresh.is-refreshing{opacity:1;cursor:progress;border-color:#69b8ff}
@media(prefers-reduced-motion:reduce){#refresh.is-refreshing::before{animation:none;border-top-color:#69b8ff}}

/* Balanced, readable dashboard status cards. Eight cards form two rows on desktop. */
.status-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 20px}
.status-grid .card{min-width:0;min-height:166px;margin:0;padding:18px 19px;border-radius:19px;position:relative;overflow:hidden;border-color:rgba(190,204,225,.21);box-shadow:0 8px 22px rgba(0,0,0,.11)}
.status-grid .card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 8px 8px;background:rgba(160,173,192,.45)}
.status-grid .card.good::before{background:#47ce97}
.status-grid .card.warn::before{background:#f0c15a}
.status-grid .card.bad::before{background:#f1848a}
.status-grid .status>span{display:block;color:#d1d8e3;font-size:12px;font-weight:750;letter-spacing:.085em;text-transform:uppercase;line-height:1.4;min-height:2.7em}
.status-grid .status>strong{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.035em;line-height:1.18;margin-top:12px;overflow-wrap:normal;word-break:normal}
.status-grid .status>small{font-size:13px;line-height:1.5;margin-top:10px;color:#bdc8d6;overflow-wrap:break-word}
#indoorAirCard>strong,#outdoorAirCard>strong{font-size:24px}
@media (min-width:1250px){main{width:min(2200px,calc(100vw - 36px))}}
@media (min-width:761px) and (max-width:980px){.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.status-grid .card{padding:14px;min-height:160px;border-radius:16px}.status-grid .status>strong{font-size:21px}.status-grid .status>small{font-size:12px}}
@media (max-width:370px){.status-grid{grid-template-columns:1fr}.status-grid .card{min-height:0}}

/* On-demand smoke investigation: compact when idle, scannable when expanded. */
#smokeWildfireCard{padding:20px 22px}
.smoke-action{width:100%;max-width:440px;margin-top:12px;padding:13px 16px;border:1px solid #52667d;border-radius:13px;background:linear-gradient(135deg,#26394b,#1d2835);font-size:15px;text-align:center;cursor:pointer}
.smoke-action:disabled{opacity:.6;cursor:wait}
.smoke-results[hidden]{display:none!important}
.smoke-results{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.smoke-results-heading{font-size:14px;font-weight:800;margin-bottom:7px}
.smoke-fire{padding:11px 0;border-bottom:1px solid var(--line)}
.smoke-fire strong{display:block;font-size:15px}
.smoke-fire small,.smoke-foot{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
.smoke-foot{margin-top:12px}

/* Campsite safety and emergency contacts. */
#campsiteWildlifeCard .section-row{flex-wrap:wrap}
#campsiteWildlifeCard a{color:#99cfff}
.wildlife-emergency{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.wildlife-emergency strong{display:block;padding:12px 15px;border:1px solid #45556b;background:#1c2735;border-radius:12px;font-size:16px}
.wildlife-results[hidden]{display:none!important}
.wildlife-results{margin-top:17px;border-top:1px solid var(--line);padding-top:8px}
.wildlife-results h4{font-size:15px;margin:18px 0 8px;color:#e8edf6}
.wildlife-results p{font-size:13px;color:var(--muted)}
.wildlife-item{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}
.wildlife-item strong{font-size:15px}.wildlife-item small{color:var(--muted);font-size:12px}
.wildlife-item a{font-size:13px;margin-top:5px}

/* Wildlife identification thumbnails (photos are historical observation examples). */
.wildlife-results .wildlife-item:has(.wildlife-media){flex-direction:row;align-items:flex-start;gap:13px}
.wildlife-media{width:82px;height:82px;flex:none;border-radius:13px;display:grid;place-items:center;background:#24303a;position:relative;overflow:hidden;font-size:34px}
.wildlife-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wildlife-content{display:flex;flex-direction:column;gap:4px;min-width:0}
.wildlife-credit{font-size:10px!important;opacity:.8}

/* Status layout: three balanced columns for nine tiles, responsive below desktop. */
.status-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.status-grid{grid-template-columns:1fr}}

/* Public dashboard contains eight status tiles; private camp-host has nine. */
@media(min-width:1100px){body.public-dashboard .status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Visible, non-blocking data loading indicator on status tiles. */
.status-grid .status.data-loading{position:relative}
.status-grid .status.data-loading::after{
  content:"";position:absolute;top:15px;right:15px;width:16px;height:16px;
  border:2px solid rgba(173,200,225,.25);border-top-color:#9bd1ff;
  border-radius:50%;animation:status-loading-spin .8s linear infinite;
  pointer-events:none
}
@keyframes status-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .status-grid .status.data-loading::after{animation:none;border-top-color:#9bd1ff}
}

/* SDR Radio card: actual decoded playback, not merely server availability. */
#radioListeningCard.radio-connected {
  background:linear-gradient(180deg,#174832 0%,#142b23 55%,var(--card) 100%);
  border-color:#35a76a;
}
#radioListeningCard.radio-disconnected {
  background:linear-gradient(180deg,#54232b 0%,#302026 55%,var(--card) 100%);
  border-color:#b85260;
}


/* Full-width lower dashboard, scoped so primary status tiles remain unchanged. */
@media (min-width: 1000px) {
  main { width: calc(100% - 36px); max-width: none; }
  .dashboard-lower-grid {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:14px;
    align-items:start;
  }
  .dashboard-lower-grid > .card,
  .dashboard-lower-grid > .grid {min-width:0;margin:0}
  #smokeWildfireCard {grid-column:span 6}
  #campsiteWildlifeCard {grid-column:span 6}
  #astronomyCard {grid-column:1 / -1}
  .lower-travel {grid-column:span 8}
  .lower-details {grid-column:span 4;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lower-details .card {margin:0}
  .lower-report {grid-column:1 / -1}
  .lower-history {grid-column:1 / -1}
  .lower-forecast {grid-column:span 7}
  .lower-alerts {grid-column:span 5}
  .lower-federal {grid-column:span 5}
  .lower-roads {grid-column:span 7}
  .dashboard-lower-grid > .pwa {grid-column:1 / -1}
  .history-charts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .history-chart {min-width:0}
  .history-chart .chart-label {margin:4px 0 8px}
  .history-chart canvas {display:block;max-width:100%}

  /* Night Sky: summary and targets are peers rather than one tall narrow list. */
  .astro-layout {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
  .astro-overview,.astro-targets {min-width:0}
  .astro-targets {border-left:1px solid rgba(125,141,191,.26);padding-left:24px}
  .astro-metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .astro-section-title {margin-top:0}
  .astro-objects {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .astro-object {min-width:0}
  .astro-highlight {margin-top:14px}
}
@media (min-width: 1000px) and (max-width: 1350px) {
  .astro-layout {grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .astro-objects {grid-template-columns:1fr}
}
@media (min-width: 761px) and (max-width: 999px) {
  .dashboard-lower-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .dashboard-lower-grid > .card,.dashboard-lower-grid > .grid {min-width:0;margin:0}
  #smokeWildfireCard,#campsiteWildlifeCard {grid-column:span 1}
  #astronomyCard,.lower-travel,.lower-details,.lower-report,.lower-history,
  .lower-forecast,.lower-alerts,.lower-federal,.lower-roads {grid-column:1 / -1}
  .lower-details {grid-template-columns:repeat(4,minmax(0,1fr))}
  .lower-details .card {margin:0}
  .history-charts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width: 760px) {
  .dashboard-lower-grid {display:block}
  .astro-layout {display:block}
  .history-charts {display:block}
}


/* Visual polish, scoped below the existing top status cards. */
.dashboard-lower-grid > .card {border-color:rgba(140,165,199,.22);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.dashboard-lower-grid .section-title {font-size:12px;font-weight:800;letter-spacing:.12em;color:#b4c8e1}
.dashboard-lower-grid > .card:not(.astro-card) {position:relative}
.dashboard-lower-grid > .card:not(.astro-card):before {
  content:"";position:absolute;top:0;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(111,167,218,.48),transparent);
  pointer-events:none
}
.lower-history {background:radial-gradient(ellipse at 93% 0%,rgba(48,94,143,.17),transparent 42%),#151920}
.lower-forecast {background:radial-gradient(ellipse at 95% 0%,rgba(79,117,173,.14),transparent 42%),#151920}
.lower-travel {background:radial-gradient(ellipse at 95% 0%,rgba(74,142,121,.16),transparent 42%),#151920}
.lower-alerts,.lower-federal,.lower-roads {background:radial-gradient(ellipse at 100% 0%,rgba(105,120,165,.10),transparent 48%),#151920}
.history-chart {padding:12px;border:1px solid rgba(130,150,181,.18);border-radius:14px;background:rgba(9,17,29,.42)}
.history-chart canvas {border:1px solid rgba(132,158,189,.16)}
.history-chart .chart-label {color:#c7d8ec;font-weight:800}

/* Night sky illustrated with lightweight CSS, not downloaded images. */
#astronomyCard.astro-card {
  isolation:isolate;
  background:
    radial-gradient(ellipse at 13% 16%,rgba(79,102,189,.24),transparent 36%),
    radial-gradient(ellipse at 88% 5%,rgba(74,42,136,.22),transparent 35%),
    linear-gradient(150deg,#101b34 0%,#0e1529 50%,#121525 100%);
  border:1px solid rgba(116,147,220,.36);
  box-shadow:inset 0 1px rgba(205,223,255,.08),0 18px 40px rgba(3,7,20,.28);
}
#astronomyCard.astro-card:before {
  z-index:-1;inset:0;opacity:.65;
  background-image:
    radial-gradient(circle at 8% 8%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 25% 20%,#b8d9ff 0 1px,transparent 1.6px),
    radial-gradient(circle at 46% 11%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 61% 32%,#98bfff 0 1px,transparent 1.7px),
    radial-gradient(circle at 73% 7%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 93% 17%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 83% 62%,#acc7ff 0 1px,transparent 1.8px),
    radial-gradient(circle at 35% 78%,#fff 0 1px,transparent 1.6px);
}
#astronomyCard .astro-title {
  font-size:clamp(27px,2.5vw,41px);letter-spacing:-.045em;
  background:linear-gradient(110deg,#fff 15%,#c5d9ff 75%,#b6b4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#astronomyCard .astro-status {color:#b6cae9;font-size:14px}
#astronomyCard .astro-metrics {margin-top:14px}
#astronomyCard .astro-metric {
  min-height:84px;
  border:1px solid rgba(125,157,214,.25);
  background:linear-gradient(145deg,rgba(22,36,64,.84),rgba(9,16,32,.68));
}
#astronomyCard .astro-metric strong {color:#f0f5ff;overflow-wrap:anywhere}
#astronomyCard .astro-weather {
  padding:12px 14px;border-radius:12px;
  background:rgba(15,30,54,.54);border:1px solid rgba(128,153,199,.18);
  line-height:1.6;
}
.astro-visuals {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.astro-moon-visual,.astro-score-visual {
  min-width:0;min-height:190px;padding:15px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;overflow:hidden;
  border-radius:18px;border:1px solid rgba(144,168,227,.30);
  background:radial-gradient(circle at 50% 39%,rgba(102,109,190,.25),transparent 57%),rgba(9,17,36,.65);
}
.astro-visual-label {color:#9eb4da;font-size:11px;font-weight:850;letter-spacing:.14em}
.astro-moon-disc {
  width:92px;height:92px;display:grid;place-items:center;
  font-size:72px;line-height:1;
  filter:drop-shadow(0 0 16px rgba(218,224,255,.28));
}
.astro-score-ring {
  --sky-score:0;
  height:103px;width:103px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(from -90deg,#75ebc4 0%,#79b8ff calc(var(--sky-score)*1%),rgba(95,111,159,.28) 0%);
  box-shadow:0 0 26px rgba(83,141,212,.13);
}
.astro-score-ring.astro-score-unavailable {background:conic-gradient(from -90deg,rgba(95,111,159,.35) 0% 100%)}
.astro-score-inner {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:83px;height:83px;border-radius:50%;
  background:radial-gradient(circle at 45% 35%,#1c2a4c,#111b34);
}
.astro-score-inner strong {font-size:30px;letter-spacing:-.05em;line-height:1;color:#f3f8ff}
.astro-score-inner span {font-size:11px;color:#aab8d6}
.astro-visual-caption {font-size:12px;line-height:1.35;color:#c2cfee}
#astronomyCard .astro-targets {min-width:0}
#astronomyCard .astro-section-title {color:#dce9ff;letter-spacing:.075em}
#astronomyCard .astro-object {
  border:1px solid rgba(127,148,198,.2);
  background:linear-gradient(125deg,rgba(28,39,69,.48),rgba(14,22,40,.5));
  border-radius:13px;padding:13px;margin:5px 0;align-content:start;
}
#astronomyCard .astro-object:first-child {border-top:1px solid rgba(127,148,198,.2)}
#astronomyCard .astro-object-rank {background:#26385c;border-color:#556daa}
#astronomyCard .astro-highlight {background:rgba(66,54,117,.30);border-color:rgba(151,138,215,.35)}
#astronomyCard .astro-note {line-height:1.6}

/* Keep the visuals attractive but compact on the Pi's narrow/mobile views. */
@media (max-width: 1350px) {
  .astro-moon-visual,.astro-score-visual {min-height:166px;padding:12px}
  .astro-moon-disc {width:76px;height:76px;font-size:58px}
  .astro-score-ring {width:88px;height:88px}
  .astro-score-inner {width:71px;height:71px}
}
@media (max-width: 760px) {
  #astronomyCard .astro-title {font-size:26px}
  .astro-visuals {gap:9px}
  .astro-moon-visual,.astro-score-visual {min-height:160px;padding:10px}
  .astro-visual-label {font-size:10px}
  .astro-visual-caption {font-size:11px}
  .history-chart {margin-bottom:12px}
}
@media (prefers-reduced-motion: reduce) {
  .astro-score-ring,.astro-moon-disc {transition:none;animation:none}
}


/* Readability repair: no half-width, left-crammed panels beneath Tempest History.
   Retain all existing DOM IDs and update paths; presentation only. */
@media (min-width:1000px) {
  .dashboard-lower-grid > .lower-forecast,
  .dashboard-lower-grid > .lower-alerts,
  .dashboard-lower-grid > .lower-federal,
  .dashboard-lower-grid > .lower-roads {
    grid-column:1 / -1;
    width:100%;
  }
}
/* Legible typography on large monitors, independent of the small status tiles. */
.dashboard-lower-grid > :is(.lower-forecast,.lower-alerts,.lower-federal,.lower-roads) {
  padding:clamp(20px,2vw,34px);
  font-size:clamp(16px,1.12vw,19px);
  line-height:1.62;
}
.dashboard-lower-grid > :is(.lower-forecast,.lower-alerts,.lower-federal,.lower-roads) > .section-title {
  font-size:clamp(17px,1.25vw,22px);
  font-weight:850;
  letter-spacing:.045em;
  text-transform:none;
  color:#e4edfc;
  margin-bottom:18px;
}
.lower-forecast .period,
.lower-federal .road-item,
.lower-roads .road-item {
  min-width:0;
  padding:18px 20px;
  border:1px solid rgba(137,160,196,.23);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(35,51,76,.46),rgba(15,24,39,.44));
  overflow-wrap:anywhere;
}
.lower-forecast .period b,
.lower-federal .road-item b,
.lower-roads .road-item b,
.lower-alerts .alert b {
  display:inline-block;
  color:#f3f7ff;
  font-size:1.09em;
  margin-bottom:5px;
}
.lower-forecast .period:first-child,
.lower-federal .road-item:first-child,
.lower-roads .road-item:first-child {border-top:1px solid rgba(137,160,196,.23)}
.lower-alerts .alert {
  margin:0;
  padding:18px 20px;
  border:1px solid rgba(188,111,132,.32);
  border-left:4px solid #d95b65;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(78,31,46,.28),rgba(18,26,42,.6));
}
.lower-federal .road-summary,.lower-roads .road-summary {
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.45;
  margin-bottom:18px;
  color:#dce8fa;
}
.lower-roads .road-subhead {
  font-size:15px;
  font-weight:850;
  color:#a7c6ee;
  margin:0 0 12px;
}
.lower-roads > :is(#chainControls,#closures,#localRoads) {min-width:0}
.lower-roads > :is(#chainControls,#closures,#localRoads):empty {display:none}
@media (min-width:1000px) {
  /* Forecast periods spread across the panel, not a narrow vertical list. */
  #forecast {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  #forecast > .period {margin:0}
  /* The few alert notices are balanced across the full content region. */
  #alerts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #federalAlerts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  /* Road categories form independent columns using existing containers. */
  .lower-roads {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;align-items:start}
  .lower-roads > .section-title,.lower-roads > #roadSummary {grid-column:1 / -1}
}
@media (min-width:761px) and (max-width:999px) {
  #forecast {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #alerts,#federalAlerts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:760px) {
  .lower-forecast .period,.lower-alerts .alert,
  .lower-federal .road-item,.lower-roads .road-item {
    padding:13px 14px;margin-bottom:10px;
  }
}

/* Auto-fit prevents a single alert/notice or road category leaving blank columns. */
@media (min-width:1000px) {
  #forecast {grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr))}
  #alerts {grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
  #federalAlerts {grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
  .lower-roads {display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
  .lower-roads > .section-title,.lower-roads > #roadSummary {flex:0 0 100%}
  .lower-roads > :is(#chainControls,#closures,#localRoads):not(:empty) {flex:1 1 350px}
}


/* Agency Radio Frequencies: dynamically inserted grid item. Full width like
   the forecast and road panels, not a single narrow 1/12-column tile. */
.dashboard-lower-grid > .agency-radio-card {
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  padding:clamp(20px,2vw,34px);
  font-size:clamp(16px,1.12vw,19px);
  line-height:1.55;
  background:radial-gradient(ellipse at 95% 0%,rgba(54,112,151,.15),transparent 45%),#151920;
}
.agency-radio-card > .section-title {
  font-size:clamp(17px,1.25vw,22px);
  font-weight:850;
  text-transform:none;
  letter-spacing:.045em;
  color:#e4edfc;
  margin-bottom:16px;
}
.agency-radio-card #radioSummary {font-size:clamp(18px,1.3vw,22px);line-height:1.45;color:#dbe8fa}
.agency-radio-card #noaaChannels,
.agency-radio-card #radioFrequencies {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  align-items:stretch;
  gap:14px;
  margin:14px 0 22px;
}
.agency-radio-card :is(#noaaChannels,#radioFrequencies) > .road-item {
  min-width:0;
  padding:17px 18px;
  margin:0;
  border:1px solid rgba(137,160,196,.25);
  border-radius:14px;
  background:linear-gradient(140deg,rgba(35,51,76,.58),rgba(15,24,39,.50));
  overflow-wrap:anywhere;
  line-height:1.5;
}
.agency-radio-card :is(#noaaChannels,#radioFrequencies) > .road-item:first-child {
  border-top:1px solid rgba(137,160,196,.25);
}
.agency-radio-card .road-item > b {font-size:1.06em;color:#f1f6ff}
.agency-radio-card .road-item > strong {font-size:1.28em;letter-spacing:.01em;color:#b5dcff}
.agency-radio-card .road-item .radio-listen {
  margin-top:8px;
  font-size:14px;
  padding:8px 13px;
}
.agency-radio-card .road-item a {color:#a7cefa}
.agency-radio-card #radioSquelch {max-width:720px}
.agency-radio-card #radioPlayerStatus {font-size:15px}
.agency-radio-card .muted {line-height:1.5}
@media(max-width:760px) {
  .agency-radio-card #noaaChannels,
  .agency-radio-card #radioFrequencies {grid-template-columns:1fr;gap:10px}
  .agency-radio-card :is(#noaaChannels,#radioFrequencies) > .road-item {padding:13px 14px}
}


/* Accurate, high-resolution SVG moon phases; display only. */
#astronomyCard .astro-moon-disc {
  width:clamp(108px,10vw,164px);
  height:clamp(108px,10vw,164px);
  max-width:100%;
  font-size:initial;
  filter:drop-shadow(0 0 24px rgba(201,221,255,.18));
}
#astronomyCard .astro-moon-svg {
  width:100%;
  height:100%;
  display:block;
}
#astronomyCard .astro-moon-visual {
  min-height:230px;
}
#astronomyCard .astro-moon-placeholder {
  font-size:65px;
}
@media (max-width:1350px) {
  #astronomyCard .astro-moon-disc {width:112px;height:112px}
  #astronomyCard .astro-moon-visual {min-height:186px}
}
@media (max-width:760px) {
  #astronomyCard .astro-moon-disc {width:96px;height:96px}
  #astronomyCard .astro-moon-visual {min-height:166px}
}


/* NASA lunar mosaic + phase shadow. The Moon SVG overlays a real surface
   photograph, with no invented crater symbols. */
#astronomyCard .astro-moon-disc {
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:50%;background:#050d1a;
  box-shadow:0 0 0 1px rgba(155,179,213,.28),0 0 22px rgba(185,206,242,.16);
}
#astronomyCard .astro-moon-photo {
  position:absolute;left:14.15%;top:14.15%;width:71.7%;height:71.7%;
  border-radius:50%;object-fit:cover;display:block;
  filter:contrast(1.17) brightness(1.05);
}
#astronomyCard .astro-moon-photo[hidden] {display:none}
#astronomyCard .astro-moon-phase-overlay {
  position:absolute;inset:0;pointer-events:none;
}
#astronomyCard .astro-moon-phase-overlay .astro-moon-svg {width:100%;height:100%;display:block}
#astronomyCard .astro-object-with-photo {
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;row-gap:8px;
  align-items:start;
}
#astronomyCard .astro-object-with-photo .astro-object-rank {
  grid-row:1 / 3;
}
#astronomyCard .astro-target-media {
  grid-column:2;
  width:min(100%,144px);
  max-width:144px;
  display:flex;flex-direction:column;gap:3px;
}
#astronomyCard .astro-target-image {
  display:block;
  width:100%;height:116px;
  object-fit:cover;
  border-radius:11px;
  background:#080f1d;
  border:1px solid rgba(141,167,217,.27);
}
#astronomyCard .astro-target-image[hidden] {display:none}
#astronomyCard .astro-target-media small {
  font-size:10px;line-height:1.3;color:#a5b8d7;
}
/* Removed obsolete last-child grid assignment: it forced target text into the photo column. */
@media (max-width:760px) {
  #astronomyCard .astro-target-media {width:112px}
  #astronomyCard .astro-target-image {height:94px}
}

/* All observing-target photos use the same compact square visual footprint. */
#astronomyCard .astro-target-media {width:124px;max-width:100%}
#astronomyCard .astro-target-image {width:124px;height:124px;max-width:100%;object-fit:cover}
@media(max-width:760px) {
  #astronomyCard .astro-target-media {width:100px}
  #astronomyCard .astro-target-image {width:100px;height:100px}
}


/* Larger northern-sky observing catalog: keep targets scannable, not a tall list. */
#astronomyCard .astro-target-count {
  display:inline-block;margin-left:10px;padding:3px 9px;
  border:1px solid rgba(156,180,226,.27);border-radius:999px;
  color:#a9c7ee;font-size:12px;letter-spacing:.015em;
  font-weight:700;text-transform:none;vertical-align:middle;
}
#astronomyCard .astro-objects {row-gap:10px}
#astronomyCard .astro-object {margin:0;min-height:108px}
#astronomyCard .astro-object div div {line-height:1.43}
@media(min-width:1800px) {
  #astronomyCard .astro-layout {
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  }
  #astronomyCard .astro-objects {grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
}
@media(min-width:1000px) and (max-width:1350px) {
  #astronomyCard .astro-objects {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px) {
  #astronomyCard .astro-object {min-height:0}
}


/* Compact, aligned astronomy targets: all 18 cards reserve the same image
   footprint whether an official NASA photo exists or not. */
#astronomyCard .astro-objects {
  align-items:stretch;
  grid-auto-rows:minmax(148px,auto);
}
#astronomyCard .astro-object,
#astronomyCard .astro-object-with-photo {
  display:grid;
  grid-template-columns:minmax(0,1fr) 94px;
  grid-template-rows:24px minmax(0,1fr);
  gap:8px 11px;
  align-items:start;
  min-height:148px;
  padding:13px;
}
#astronomyCard .astro-object-rank,
#astronomyCard .astro-object-with-photo .astro-object-rank {
  grid-column:1;
  grid-row:1;
  width:24px;height:24px;
}
#astronomyCard .astro-object-copy,
#astronomyCard .astro-object-with-photo > .astro-object-copy {
  grid-column:1;
  grid-row:2;
  min-width:0;
  overflow-wrap:break-word;
  font-size:13px;
}
#astronomyCard .astro-object-copy b {
  display:block;font-size:15px;line-height:1.25;margin-bottom:5px;
  color:#f3f6ff;
}
#astronomyCard .astro-object-copy div,
#astronomyCard .astro-object-copy span {
  display:block;font-size:12px;line-height:1.45;
  color:#c1d0eb;overflow-wrap:anywhere;
}
#astronomyCard .astro-object-with-photo > .astro-target-media,
#astronomyCard .astro-target-media {
  grid-column:2;
  grid-row:1 / 3;
  width:94px;max-width:100%;height:116px;
  position:relative;
  display:block;
  border:1px solid rgba(119,149,199,.24);
  border-radius:11px;
  overflow:hidden;
  background:linear-gradient(150deg,rgba(41,62,104,.5),rgba(12,21,42,.85));
}
#astronomyCard .astro-target-image {
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;z-index:1;
  border:0;border-radius:0;
}
#astronomyCard .astro-photo-placeholder {
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:38px;color:#658cb4;
  background:radial-gradient(circle at 55% 45%,rgba(75,114,175,.22),transparent 55%);
}
#astronomyCard .astro-target-image[hidden] {display:none}
#astronomyCard .astro-target-media small {display:none}
@media(min-width:1800px) {
  #astronomyCard .astro-objects {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px) {
  #astronomyCard .astro-objects {grid-auto-rows:auto}
  #astronomyCard .astro-object {min-height:132px}
  #astronomyCard .astro-target-media {height:106px}
}


/* Final kiosk readability: avoid three narrow columns on ordinary screens. */
#astronomyCard .astro-objects {grid-template-columns:repeat(2,minmax(0,1fr))}
#astronomyCard .astro-object .astro-object-copy b {font-size:clamp(15px,1.05vw,18px)}
#astronomyCard .astro-object .astro-object-copy div,
#astronomyCard .astro-object .astro-object-copy span {
  font-size:clamp(13px,.9vw,15px);line-height:1.5;
}
@media(min-width:2400px) {
  #astronomyCard .astro-objects {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px) {
  #astronomyCard .astro-layout {grid-template-columns:1fr}
  #astronomyCard .astro-targets {border-left:0;padding-left:0;border-top:1px solid rgba(125,141,191,.26);padding-top:18px}
}
@media(max-width:580px) {
  #astronomyCard .astro-objects {grid-template-columns:1fr}
}

/* Photo provenance for the expanded northern-sky gallery. */
#astronomyCard .astro-source-label{font-size:13px;color:#aebedc;line-height:1.5;margin:4px 0 14px}


/* Sky gallery repair: text and images occupy distinct, readable columns.
   Overrides older astronomy layout rules without changing other cards. */
#astronomyCard .astro-object-with-photo > .astro-object-copy,
#astronomyCard .astro-object > .astro-object-copy {
  grid-column:1;
  grid-row:2;
  min-width:0;
  width:100%;
  overflow-wrap:normal;
  word-break:normal;
}
#astronomyCard .astro-object-with-photo > .astro-target-media,
#astronomyCard .astro-object > .astro-target-media {
  grid-column:2;
  grid-row:1 / 3;
}
#astronomyCard .astro-objects {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:12px;
}
#astronomyCard .astro-object,
#astronomyCard .astro-object-with-photo {
  grid-template-columns:minmax(0,1fr) 104px;
  grid-template-rows:24px auto;
  min-height:150px;
  padding:14px;
  gap:8px 12px;
}
#astronomyCard .astro-object .astro-object-copy b {
  font-size:clamp(15px,1.1vw,18px);
  overflow-wrap:break-word;
}
#astronomyCard .astro-object .astro-object-copy div,
#astronomyCard .astro-object .astro-object-copy span {
  font-size:clamp(12px,.92vw,15px);
  line-height:1.45;
  overflow-wrap:break-word;
}
#astronomyCard .astro-target-media {
  width:104px;
  height:112px;
}
#astronomyCard .astro-moon-disc.astro-new-moon {
  background:radial-gradient(circle at 50% 48%,#15283e 10%,#071323 72%);
}
#astronomyCard .astro-moon-disc.astro-new-moon .astro-moon-photo {
  filter:grayscale(1) brightness(.65) contrast(1.15);
}
@media (min-width:2400px) {
  #astronomyCard .astro-objects {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:1450px) {
  #astronomyCard .astro-layout {grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  #astronomyCard .astro-objects {grid-template-columns:1fr}
}
@media (max-width:1100px) {
  #astronomyCard .astro-layout {grid-template-columns:1fr}
  #astronomyCard .astro-objects {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px) {
  #astronomyCard .astro-objects {grid-template-columns:1fr}
  #astronomyCard .astro-object,#astronomyCard .astro-object-with-photo {grid-template-columns:minmax(0,1fr) 90px;min-height:128px}
  #astronomyCard .astro-target-media {width:90px;height:100px}
}


/* NASA SVS hourly Moon: entire image already contains the correctly lit disc. */
#astronomyCard .astro-moon-disc.astro-nasa-phase {
  background:#000;
  border-radius:50%;
}
#astronomyCard .astro-nasa-moon-photo {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  filter:brightness(1.22) contrast(1.1);
}


/* NASA-inspired Moon presentation: legible details next to actual hourly imagery.
   The NASA frame is plain; adjacent values come from the existing astronomy API. */
#astronomyCard .astro-visuals {grid-template-columns:minmax(0,1fr)}
#astronomyCard .astro-moon-visual {
  align-items:stretch;
  gap:10px;
  min-height:0;
}
#astronomyCard .astro-moon-presentation {
  display:grid;
  grid-template-columns:minmax(110px,.8fr) minmax(0,1.3fr);
  gap:13px;
  width:100%;
  min-width:0;
  align-items:center;
  padding:10px;
  background:rgba(2,7,18,.84);
  border:1px solid rgba(113,144,201,.28);
  border-radius:16px;
}
#astronomyCard .astro-moon-presentation .astro-moon-disc {
  width:min(100%,192px);
  height:auto;
  aspect-ratio:1;
  justify-self:center;
  flex-shrink:0;
  border-radius:50%;
}
#astronomyCard .astro-moon-info {min-width:0;display:flex;flex-direction:column;gap:5px;text-align:left}
#astronomyCard .astro-nasa-heading {font-size:clamp(15px,1.2vw,21px);font-weight:800;color:#f3f7ff}
#astronomyCard .astro-nasa-credit {font-size:11px;line-height:1.35;color:#9eb5df}
#astronomyCard .astro-moon-data {margin:6px 0 3px;display:grid;gap:6px}
#astronomyCard .astro-moon-data > div {min-width:0}
#astronomyCard .astro-moon-data dt {color:#8ea6d1;font-size:10px;font-weight:750;letter-spacing:.045em;text-transform:uppercase}
#astronomyCard .astro-moon-data dd {margin:1px 0 0;color:#f0f5ff;font-size:clamp(12px,.9vw,15px);overflow-wrap:break-word}
#astronomyCard .astro-nasa-link {font-size:11px;color:#a9d9ff;text-decoration:underline;text-underline-offset:2px}
#astronomyCard .astro-moon-presentation .astro-nasa-moon-photo {border-radius:50%}
#astronomyCard .astro-score-visual {min-height:155px;gap:9px}
@media(max-width:600px){
  #astronomyCard .astro-moon-presentation {grid-template-columns:1fr;justify-items:center}
  #astronomyCard .astro-moon-info {width:100%}
  #astronomyCard .astro-moon-data {grid-template-columns:repeat(2,minmax(0,1fr))}
}