/* Globe — volcano activity explanation overlay.
   Reuses the .ex-* shell from quake-explain.css; recolours to the volcano
   accent (#b0741c) and adds the alert-level ladder + hazard chips. */

/* recolour the shared shell to the volcano accent when the panel is a volcano */
.ex-panel.vol .ex-eyebrow .dot { background: #b0741c; }
.ex-panel.vol .ex-sec .n { color: #b0741c; }
.ex-panel.vol .ex-badge { color: #b0741c; border-color: rgba(176, 116, 28, 0.5); }

/* --- header: alert-level chip stands in for the magnitude --- */
.ex-vhead { display: flex; align-items: center; gap: 14px; }
.ex-vchip {
  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(--vac, #b0741c);
}
.ex-vchip .lv-k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin-bottom: 4px; }
.ex-vchip .lv-n { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-vchip .lv-n .u { font-size: 14px; font-weight: 600; opacity: 0.85; }
.ex-vname { font-size: 19px; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.ex-vname .sub { display: block; font-size: 13px; font-weight: 500; color: #8c887f; margin-top: 3px; }

/* --- alert-level ladder figure --- */
.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: 30px 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: 14px; 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;
}

/* --- volcano cross-section: reuse .ex-fault block --- */
.ex-panel.vol .ex-fault .fname { color: #2c2a27; }

/* --- 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: #b0741c; flex: none; }

/* --- outlook / preparedness box (mirrors tsunami box, amber) --- */
.ex-outlook {
  padding: 15px 17px; margin-top: 8px;
  background: rgba(176, 116, 28, 0.09); border: 1px solid #b0741c;
}
.ex-outlook .ou-head { display: flex; align-items: center; gap: 10px; }
.ex-outlook .ou-icon { width: 22px; height: 22px; color: #b0741c; flex: none; }
.ex-outlook .ou-icon svg { width: 100%; height: 100%; }
.ex-outlook .ou-label { font-size: 14px; font-weight: 700; color: #b0741c; }
.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; }

/* loading/spinner accent for volcano */
.ex-panel.vol .ex-spinner { border-top-color: #b0741c; }

/* 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: #b0741c; 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; }
}