/* /assets/css/spacewx.css
   Space Weather Ribbon v2 (glass + animated solar sweep + gauges)
*/

.spacewx {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(229,231,235,0.75);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  margin: 14px 0 10px;
}

.spacewx::before{
  content:"";
  position:absolute; inset:-40% -60%;
  background:
    radial-gradient(closest-side at 20% 40%, rgba(132,204,22,.22), transparent 55%),
    radial-gradient(closest-side at 70% 20%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(closest-side at 85% 70%, rgba(167,139,250,.16), transparent 55%),
    linear-gradient(90deg, transparent, rgba(132,204,22,.10), transparent);
  transform: rotate(8deg);
  animation: solarSweep 10s linear infinite;
  pointer-events:none;
  filter: blur(2px);
}

@keyframes solarSweep{
  0%{ transform: translateX(-12%) rotate(8deg); opacity:.85; }
  50%{ opacity: 1; }
  100%{ transform: translateX(12%) rotate(8deg); opacity:.85; }
}

.spacewx__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px 6px;
  position: relative;
  z-index: 1;
}

.spacewx__title{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  letter-spacing:-0.02em;
  color: rgba(17,24,39,.90);
}

.spacewx__dot{
  width:12px; height:12px; border-radius:999px;
  background: rgba(132,204,22,0.95);
  box-shadow: 0 0 0 6px rgba(132,204,22,0.14);
}

.spacewx__updated{
  font-family: var(--font-mono);
  font-size:12px;
  color: rgba(31,41,55,.55);
  white-space: nowrap;
}

.spacewx__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  padding: 8px 12px 14px;
  position: relative;
  z-index: 1;
}

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

.wxCard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(229,231,235,0.75);
  background: rgba(255,255,255,0.68);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
  min-width: 0;
}

.wxGauge{
  width:34px; height:34px;
  border-radius:999px;
  position: relative;
  flex: 0 0 auto;
  background: conic-gradient(
    rgba(132,204,22,0.95) calc(var(--p, 0) * 1%),
    rgba(229,231,235,0.95) 0
  );
}
.wxGauge::after{
  content:"";
  position:absolute; inset:4px;
  border-radius:999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(229,231,235,0.85);
}

.wxMeta{ min-width:0; }
.wxLabel{
  font-size:12px;
  font-weight: 900;
  color: rgba(31,41,55,.62);
  letter-spacing:-0.01em;
}

.wxValue{
  font-family: var(--font-mono);
  font-size:16px;
  font-weight: 900;
  letter-spacing:-0.01em;
  color: rgba(17,24,39,.92);
  line-height: 1.1;
  white-space: nowrap;
}

.wxUnit{
  font-size:12px;
  color: rgba(31,41,55,.55);
  margin-left:6px;
  font-weight: 800;
}

/* metric tint */
.wxGauge.kp{  background: conic-gradient(rgba(59,130,246,.95) calc(var(--p,0)*1%), rgba(229,231,235,.95) 0); }
.wxGauge.ap{  background: conic-gradient(rgba(245,158,11,.95) calc(var(--p,0)*1%), rgba(229,231,235,.95) 0); }
.wxGauge.sfi{ background: conic-gradient(rgba(167,139,250,.95) calc(var(--p,0)*1%), rgba(229,231,235,.95) 0); }

/* tiny “state” text */
.spacewx__state{
  padding: 0 16px 12px;
  position: relative;
  z-index: 1;
  font-size:12px;
  color: rgba(31,41,55,.55);
  font-family: var(--font-mono);
  letter-spacing:-0.01em;
  display:none;
}
.spacewx__state.is-show{ display:block; }