/* Globe — solar flare explanation overlay.
   Reuses the .ex-* shell from quake-explain.css; recolours to the solar
   accent (#e09e28) and adds the R-scale (radio-blackout) ladder, a
   Sun→Earth space-weather diagram and effect chips. */

/* recolour the shared shell to the solar accent when the panel is a flare */
.ex-panel.sol .ex-eyebrow .dot { background: #e09e28; }
.ex-panel.sol .ex-sec .n { color: #c98318; }
.ex-panel.sol .ex-badge { color: #c98318; border-color: rgba(201, 131, 24, 0.5); }
.ex-panel.sol .ex-spinner { border-top-color: #e09e28; }
.ex-panel.sol .ex-fault .fname { color: #2c2a27; }

/* --- header: R-scale chip stands in for the magnitude --- */
.ex-shead { display: flex; align-items: center; gap: 14px; }
.ex-schip {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px 12px; color: #fff; line-height: 1;
  background: var(--sac, #e09e28);
}
.ex-schip .lv-k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; margin-bottom: 4px; }
.ex-schip .lv-n { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-sname { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: #2c2a27; font-variant-numeric: tabular-nums; }
.ex-sname .sub { display: block; font-size: 13px; font-weight: 500; color: #8c887f; margin-top: 5px; letter-spacing: 0; }

/* --- R-scale ladder (radio-blackout severity) --- */
.ex-ladder { margin: 4px 0 22px; }
.ex-ladder .lad-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #2c2a27; font-weight: 600; margin-bottom: 10px; }
.ex-ladder .lad-steps { display: grid; gap: 4px; }
.ex-ladder .lad-step {
  display: grid; grid-template-columns: 38px 1fr; align-items: stretch; gap: 10px;
  opacity: 0.4; transition: opacity .2s;
}
.ex-ladder .lad-step.on { opacity: 1; }
.ex-ladder .lad-num {
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sc, #999);
}
.ex-ladder .lad-step.on .lad-num { box-shadow: inset 0 0 0 2px #2c2a27, 0 0 0 2px #fff; }
.ex-ladder .lad-body {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fbfaf7;
  border: 1px solid rgba(44, 42, 39, 0.12); border-inline-start: 3px solid var(--sc, #999);
}
.ex-ladder .lad-step.on .lad-body { background: #fff; border-color: rgba(44, 42, 39, 0.28); }
.ex-ladder .lad-lab { font-size: 13.5px; font-weight: 600; color: #2c2a27; }
.ex-ladder .lad-zone { font-size: 11px; color: #8c887f; margin-inline-start: auto; white-space: nowrap; }
.ex-ladder .lad-step.on .lad-here {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: #fff; background: #2c2a27; padding: 2px 6px; margin-inline-start: 8px;
}

/* --- effect chips (mirror volcano hazard chips) --- */
.ex-haz-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #2c2a27; font-weight: 600; margin: 22px 0 9px; }
.ex-haz { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-haz .chip {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px;
  background: #fbfaf7; border: 1px solid rgba(44, 42, 39, 0.16);
  font-size: 12.5px; font-weight: 600; color: #2c2a27;
}
.ex-haz .chip svg { width: 16px; height: 16px; color: #c98318; flex: none; }

/* --- outlook / CME box (warm gold) --- */
.ex-outlook {
  padding: 15px 17px; margin-top: 8px;
  background: rgba(224, 158, 40, 0.10); border: 1px solid #e09e28;
}
.ex-outlook .ou-head { display: flex; align-items: center; gap: 10px; }
.ex-outlook .ou-icon { width: 22px; height: 22px; color: #c98318; flex: none; }
.ex-outlook .ou-icon svg { width: 100%; height: 100%; }
.ex-outlook .ou-label { font-size: 14px; font-weight: 700; color: #c98318; }
.ex-outlook .ou-body { margin-top: 9px; padding-inline-start: 32px; }
.ex-outlook .ou-body .en { font-size: 14.5px; line-height: 1.5; color: #2c2a27; text-wrap: pretty; }
.ex-outlook .ou-body .reg { font-size: 14px; line-height: 1.55; color: rgba(44, 42, 39, 0.6); margin-top: 5px; text-wrap: pretty; }

/* source link under the disclaimer */
.ex-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #c98318; text-decoration: none; }
.ex-src:hover { text-decoration: underline; }
.ex-src svg { width: 12px; height: 12px; }

@media (max-width: 560px) {
  .ex-ladder .lad-zone { display: none; }
  .ex-sname { font-size: 26px; }
}