/* GlobalSignal v3.12.4 SAFE — self-contained Space Weather styling.
   This file intentionally does not depend on Space Weather rules in style.css,
   so stale browser/PWA copies of style.css cannot break this panel. */

.space-weather-panel{
  margin:0 0 22px;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.space-weather-panel>.panel-title{
  padding:13px 17px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.space-weather-title{
  font:600 14px 'DM Sans',sans-serif!important;
  color:var(--text)!important;
  letter-spacing:0!important;
}
#space-weather-status{
  font:10px 'IBM Plex Mono',monospace;
  letter-spacing:.75px;
  color:var(--muted);
  white-space:nowrap;
}
.space-stale{color:#f1b763!important}

.space-weather-grid{
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(150px,.7fr) minmax(260px,1.15fr) minmax(320px,1.6fr);
  align-items:stretch;
}
.space-weather-grid>div{
  padding:16px 18px;
  min-width:0;
}
.space-weather-grid>div+div{border-left:1px solid var(--line)}

.space-kp-card>span,
.space-metric>span,
.space-scales span,
.space-trend-head>span{
  display:block;
  color:var(--muted);
  font:10px 'IBM Plex Mono',monospace;
  letter-spacing:.8px;
  line-height:1.25;
}
.space-kp-value{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:7px 0 2px;
}
.space-kp-value strong,
.space-metric>strong{
  font-size:29px;
  line-height:1;
  font-weight:500;
  letter-spacing:-1px;
}
.space-kp-value small{
  color:var(--muted);
  font:12px 'IBM Plex Mono',monospace;
}
.space-kp-state{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.3;
  font-weight:500;
}
.space-kp-state.normal{color:var(--mint)}
.space-kp-state.watch{color:#f1b763}
.space-kp-state.elevated,
.space-kp-state.high{color:#f58273}
.space-kp-state.unknown{color:var(--muted)}

.space-metric{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.space-metric small{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
  margin-top:4px;
}

.space-scales{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.space-scales>div{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:5px;
  background:color-mix(in srgb,var(--field) 72%,transparent);
  min-width:0;
}
.space-scales strong{
  display:block;
  font:600 20px/1 'IBM Plex Mono',monospace;
  margin-top:6px;
}
.space-scales span{font-size:8px}
.space-scale-short{display:none}
.space-scale-long{display:block}

.space-trend{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.space-trend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.space-trend-head small{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.25;
  text-align:right;
}
.space-kp-bars{
  height:45px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  border-bottom:1px solid var(--line);
  padding-top:3px;
  overflow:hidden;
}
.space-kp-bars i{
  display:block;
  flex:1 1 0;
  min-width:3px;
  max-width:28px;
  background:var(--mint);
  border-radius:2px 2px 0 0;
  opacity:.82;
}
.space-empty{color:var(--muted);font-size:10px}
.space-prob-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:10px;
}
.space-prob-row>span{min-width:0}
.space-prob-row button{
  padding:5px 8px;
  font-size:10px;
  white-space:nowrap;
}

.space-weather-foot{
  padding:9px 17px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.space-weather-source{display:inline;white-space:nowrap}

@media(max-width:1200px){
  .space-weather-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .space-weather-grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .space-weather-grid>div:nth-child(4){border-top:1px solid var(--line)}
}

@media(max-width:900px){
  .space-weather-panel{margin-bottom:14px!important}
  .space-weather-panel>.panel-title{padding:10px 12px!important;min-height:42px!important}
  .space-weather-title{font-size:13px!important;line-height:1.15!important}
  #space-weather-status{font-size:9px!important;line-height:1.15!important}

  .space-weather-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;
  }
  .space-weather-grid>div{padding:9px 11px!important;min-width:0!important}
  .space-weather-grid>div+div{border-left:1px solid var(--line)!important}
  .space-weather-grid>div:nth-child(3),
  .space-weather-grid>div:nth-child(4){
    grid-column:1/-1!important;
    border-left:0!important;
    border-top:1px solid var(--line)!important;
  }

  .space-kp-card>span,
  .space-metric>span,
  .space-scales span,
  .space-trend-head>span{
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.55px!important;
  }
  .space-kp-value{gap:4px!important;margin:4px 0 1px!important}
  .space-kp-value strong{font-size:27px!important}
  .space-kp-value small{font-size:9px!important}
  .space-kp-state{margin-top:4px!important;font-size:10px!important;line-height:1.2!important}

  .space-metric{justify-content:center!important}
  .space-metric>strong{font-size:23px!important;margin:4px 0 2px!important}
  .space-metric small{font-size:8px!important;line-height:1.2!important;margin:0!important}

  .space-scales{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .space-scales>div{padding:6px!important;text-align:center!important;border-radius:4px!important}
  .space-scales strong{font-size:16px!important;margin-top:3px!important}
  .space-scale-long{display:none!important}
  .space-scale-short{display:block!important;font-size:8px!important}

  .space-trend{gap:5px!important;padding-top:7px!important;padding-bottom:7px!important}
  .space-trend-head{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
  }
  .space-trend-head small{
    font-size:8px!important;
    line-height:1.15!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .space-kp-bars{
    height:32px!important;
    display:flex!important;
    align-items:flex-end!important;
    gap:2px!important;
    padding-top:1px!important;
  }
  .space-kp-bars i{
    display:block!important;
    flex:1 1 0!important;
    min-width:2px!important;
    max-width:none!important;
    background:var(--mint)!important;
    border-radius:1px 1px 0 0!important;
    opacity:.82!important;
  }

  .space-prob-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    align-items:center!important;
    gap:7px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  .space-prob-row>span{
    display:block!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .space-prob-row button{
    width:32px!important;
    height:28px!important;
    min-width:32px!important;
    padding:0!important;
    font-size:14px!important;
    display:grid!important;
    place-items:center!important;
  }
  .space-prob-row button span{display:none!important}

  .space-weather-foot{
    padding:6px 11px!important;
    font-size:8px!important;
    line-height:1.15!important;
    justify-content:flex-end!important;
  }
  .space-weather-legend{display:none!important}
  .space-weather-source{display:inline!important}
}