.news-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}
.news-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid #ead9ad88;
  border-radius: 50%;
  background: #111e26dc;
  color: #ffe9b6;
  font: 600 13px system-ui;
  box-shadow: 0 0 0 3px #f0d8a014;
  pointer-events: auto;
  cursor: pointer;
}
.news-marker:hover,
.news-marker:focus-visible {
  background: #3a4336;
  border-color: #ffe9b6;
  outline: 2px solid #ffe9b666;
  outline-offset: 3px;
}
.news-card {
  position: absolute;
  z-index: 25;
  width: min(340px, calc(100% - 16px));
  max-height: min(460px, 75%);
  overflow: auto;
  padding: 17px;
  background: #0b151ef5;
  border: 1px solid #e1d5ab55;
  border-radius: 12px;
  box-shadow: 0 16px 45px #0008;
  color: #e7edf0;
  line-height: 1.5;
  font-size: 13px;
  box-sizing: border-box;
}
.news-card[hidden],
.news-markers[hidden],
.news-marker[hidden] {
  display: none;
}
.news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.news-card-top small {
  font: 9px monospace;
  letter-spacing: 1px;
  color: #bbcdce;
}
.news-card-top button {
  border: 0;
  background: none;
  color: #c6d4d8;
  font-size: 23px;
  padding: 0 3px;
  cursor: pointer;
}
.news-card article {
  padding: 10px 0 12px;
  border-bottom: 1px solid #ffffff16;
}
.news-card h3 {
  font: 600 17px/1.3 system-ui;
  margin: 5px 0 9px;
}
.news-card p {
  margin: 8px 0;
}
.news-card article > small {
  color: #d3c498;
  font-size: 10px;
}
.news-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
}
.news-card a {
  color: #bedad4;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-card details {
  font-size: 11px;
  color: #a0b4bd;
  margin-top: 9px;
}
.news-card summary {
  cursor: pointer;
}
.news-card footer {
  font-size: 10px;
  color: #92a6af;
  padding-top: 12px;
}
.news-card footer a {
  color: inherit;
}

.nature-marker.storms {
  color: #ffe0a2;
  border-color: #e6bc65;
}
.nature-marker.volcanoes {
  color: #ffc3a3;
  border-color: #db9777;
}
.ocean-legend {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75px;
  object-fit: contain;
  background: #e9eeee;
  border-radius: 5px;
  margin: 0 0 12px;
}
.ocean-legend[hidden] {
  display: none;
}
.tsunami-marker {
  color: #b8d6d8;
  border-color: #8eafb7;
}
.tsunami-marker.warning {
  color: #f4b094;
  border-color: #e0a080;
}
.tsunami-marker.threat {
  color: #ebbf9f;
  border-color: #d8a480;
}
.tsunami-marker.advisory {
  color: #e4d0a4;
  border-color: #c9b888;
}
.tsunami-list {
  display: grid;
  gap: 3px;
  margin: -8px 0 10px 0;
}
.tsunami-list[hidden] {
  display: none;
}
.tsunami-entry {
  border: 0;
  background: none;
  color: #a9bec2;
  text-align: left;
  padding: 4px 0;
  font-size: 11px;
  line-height: 1.35;
  cursor: pointer;
}
.tsunami-entry:hover,
.tsunami-entry:focus-visible {
  color: #e7edf0;
}

.ocean-legend {
  min-height: 64px;
}
.precipitation-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -6px 0 12px 0;
  color: #91a8aa;
  font: 9px var(--mono);
}
.precipitation-legend[hidden] {
  display: none;
}
.precipitation-legend .precipitation-rain,
.precipitation-legend .precipitation-snow {
  width: 31px;
  height: 4px;
  border-radius: 3px;
}
.precipitation-rain {
  background: linear-gradient(90deg, #148448, #e6c642, #d65d4e);
}
.precipitation-snow {
  background: linear-gradient(90deg, #89dbe0, #5679ce, #8f4caf);
}
/* Share control inside event cards */
.news-card-top .card-share {
  margin-left: auto;
  border: 1px solid #41505890;
  border-radius: 14px;
  padding: 3px 10px;
  font: 10px var(--mono, monospace);
  letter-spacing: 0.5px;
  color: #cfe3dc;
}
.news-card-top .card-share:hover,
.news-card-top .card-share:focus-visible {
  border-color: #b4dac5;
  color: #fff;
}
.news-focus {
  padding: 0 0 12px;
  color: var(--muted, #9ab1b5);
  font-size: 11px;
}
.news-focus > button {
  font-size: 11px;
  text-align: left;
  min-height: 28px;
}
.news-focus > div {
  padding: 10px;
  border: 1px solid #b5dbc22b;
  border-radius: 8px;
}
.news-focus label,
.news-focus small {
  display: block;
  line-height: 1.6;
}
.news-focus select {
  box-sizing: border-box;
  width: 100%;
  margin: 7px 0;
  padding: 7px;
  border: 1px solid #b5dbc244;
  border-radius: 5px;
  color: #c9dfd7;
  background: #0c181e;
  font: inherit;
}