/* SeaTrack v97.74 — slim ~2s contextual flashes (tab + map). Never stacked. */
.cf-flash {
  position: absolute;
  left: 10px; right: 10px; top: 8px;
  z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.28);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  font: 700 calc(12.5px * var(--ts, 1))/1.3 system-ui, -apple-system, sans-serif;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: auto;
  transition: opacity .28s ease, transform .28s ease;
}
.cf-flash.cf-in { opacity: 1; transform: translateY(0); }
.cf-flash.cf-out { opacity: 0; transform: translateY(-6px); }
.cf-flash[hidden] { display: none !important; }
.cf-flash .cf-ic { flex: none; font-size: calc(15px * var(--ts, 1)); line-height: 1; }
.cf-flash .cf-t { flex: 1; min-width: 0; }
.cf-flash .cf-t b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-flash .cf-t small { display: block; font-weight: 600; opacity: .9; font-size: calc(11px * var(--ts, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cf-sev-emergency { background: #e3051b; color: #fff; }
.cf-sev-watch { background: #f7941d; color: #111; }
.cf-sev-advice { background: #ffd100; color: #111; }
.cf-sev-info { background: #334155; color: #e2e8f0; }
.cf-sev-state { background: rgba(15, 55, 80, 0.96); color: #e8f4f8; border-color: rgba(125, 211, 252, 0.45); }

/* Map flash sits under the search bar, above the map */
.cf-flash.cf-map {
  position: fixed;
  left: 10px; right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  z-index: 1240;
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 400px) {
  .cf-flash.cf-map { top: calc(env(safe-area-inset-top, 0px) + 92px); }
}

/* Drawer-hosted flashes — sibling under .drawer-head, above .drawer-scroll */
.drawer > .cf-flash.cf-tab {
  position: relative;
  left: auto; right: auto; top: auto;
  z-index: 5;
  margin: 6px 10px 8px;
  width: auto;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .cf-flash { transition: none; transform: none; }
  .cf-flash.cf-out { opacity: 0; }
}